@siemens/ix 0.0.0-pr-2155-20250919111817 → 0.0.0-pr-2155-20250924070505

package/dist/esm/ix-avatar.ix-menu-avatar-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-avatar.ix-menu-avatar-item.entry.js","sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.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 './../button/button-mixin';\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/scrollbar';\n\n:host {\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  @include scrollbar.scrollbar();\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n\n      > ix-typography {\n        // Fix to get the text vertically centered\n        margin-top: 1px;\n      }\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    border-radius: 100px !important;\n\n    @include button-mixin.btn-base;\n\n    & {\n      padding: 0px;\n    }\n  }\n\n  @include button-mixin.btn-base-variant('tertiary');\n\n  .avatar {\n    transform: scale(0.8);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { makeRef } from '../utils/make-ref';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(\n  props: Readonly<{ initials?: string; a11yLabel?: string }>\n) {\n  const { initials } = props;\n\n  if (initials) {\n    return (\n      <div class={'avatar-initials'}>\n        <ix-typography format=\"label-lg\">{initials}</ix-typography>\n      </div>\n    );\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      aria-label={props.a11yLabel}\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(\n  props: Readonly<{\n    image?: string;\n    initials?: string;\n    a11yLabel?: string;\n  }>\n) {\n  return (\n    <div class=\"avatar\">\n      {props.image ? (\n        <img\n          src={props.image}\n          class=\"avatar-image\"\n          aria-label={props.a11yLabel}\n        ></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} a11yLabel={props.a11yLabel} />\n      )}\n    </div>\n  );\n}\n\nfunction UserInfo(\n  props: Readonly<{\n    image?: string;\n    initials?: string;\n    userName: string;\n    extra?: string;\n    a11yLabel?: string;\n  }>\n) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage\n          image={props.image}\n          initials={props.initials}\n          a11yLabel={props.a11yLabel}\n        />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" text-color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement!: HTMLIxAvatarElement;\n\n  /**\n   * Accessibility label for the image\n   * Will be set as aria-label on the nested HTML img element\n   *\n   * @deprecated Set the native `aria-label` on the ix-avatar host element\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials?: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   */\n  @Prop() username?: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   */\n  @Prop() extra?: string;\n\n  /**\n   * Text to display in a tooltip when hovering over the avatar\n   *\n   * @since 4.0.0\n   */\n  @Prop() tooltipText?: string;\n\n  /**\n   * aria-label for the tooltip\n   *\n   * @since 4.0.0\n   */\n  @Prop() ariaLabelTooltip?: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement?: HTMLSlotElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private async slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve, reject) => {\n      readTask(() => {\n        const button = this.hostElement.shadowRoot!.querySelector('button');\n        if (button) {\n          resolve(button);\n        } else {\n          reject(new Error('ix-avatar - trigger element not found'));\n        }\n      });\n    });\n  }\n\n  private onDropdownClick(event: MouseEvent) {\n    if (event.target === this.dropdownElement) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const a11yLabel = a11y['aria-label'];\n\n    const tooltipText = this.tooltipText || this.username;\n    const ariaHidden = tooltipText === this.username;\n\n    const Avatar = (\n      <Fragment>\n        <AvatarImage\n          image={this.image}\n          initials={this.initials}\n          a11yLabel={a11yLabel ?? this.a11yLabel}\n        />\n        {!!tooltipText && (\n          <ix-tooltip\n            ref={this.tooltipRef}\n            for={this.hostElement}\n            aria-hidden={a11yBoolean(ariaHidden)}\n            aria-label={this.ariaLabelTooltip}\n          >\n            {tooltipText}\n          </ix-tooltip>\n        )}\n      </Fragment>\n    );\n\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            selected={false}\n            type=\"button\"\n            variant=\"tertiary\"\n          >\n            {Avatar}\n          </BaseButton>\n          <ix-dropdown\n            ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n            onClick={(e) => this.onDropdownClick(e)}\n            onShowChanged={(event) => {\n              if (event.detail && this.tooltipRef.current) {\n                this.tooltipRef.current.hideTooltip(0);\n              }\n            }}\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                  a11yLabel={a11yLabel ?? this.a11yLabel}\n                />\n                {this.hasSlottedElements && (\n                  <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n                )}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return <Host>{Avatar}</Host>;\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@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  color: var(--theme-color-std-text);\n\n  @include component.ix-component;\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  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxMenuAvatarItemElement;\n\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick!: EventEmitter<MouseEvent>;\n\n  private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.dropdownItemRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <ix-dropdown-item\n        ref={this.dropdownItemRef}\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-avatar.ix-menu-avatar-item.entry.js","sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.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 './../button/button-mixin';\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/scrollbar';\n\n:host {\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  @include scrollbar.scrollbar();\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n\n      > ix-typography {\n        // Fix to get the text vertically centered\n        margin-top: 1px;\n      }\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    border-radius: 100px !important;\n\n    @include button-mixin.btn-base;\n\n    & {\n      padding: 0px;\n    }\n  }\n\n  @include button-mixin.btn-base-variant('tertiary');\n\n  .avatar {\n    transform: scale(0.8);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { makeRef } from '../utils/make-ref';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(\n  props: Readonly<{ initials?: string; a11yLabel?: string }>\n) {\n  const { initials } = props;\n\n  if (initials) {\n    return (\n      <div class={'avatar-initials'}>\n        <ix-typography format=\"label-lg\">{initials}</ix-typography>\n      </div>\n    );\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      aria-label={props.a11yLabel}\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(\n  props: Readonly<{\n    image?: string;\n    initials?: string;\n    a11yLabel?: string;\n  }>\n) {\n  return (\n    <div class=\"avatar\">\n      {props.image ? (\n        <img\n          src={props.image}\n          class=\"avatar-image\"\n          aria-label={props.a11yLabel}\n        ></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} a11yLabel={props.a11yLabel} />\n      )}\n    </div>\n  );\n}\n\nfunction UserInfo(\n  props: Readonly<{\n    image?: string;\n    initials?: string;\n    userName: string;\n    extra?: string;\n    a11yLabel?: string;\n  }>\n) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage\n          image={props.image}\n          initials={props.initials}\n          a11yLabel={props.a11yLabel}\n        />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" text-color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement!: HTMLIxAvatarElement;\n\n  /**\n   * Accessibility label for the image\n   * Will be set as aria-label on the nested HTML img element\n   *\n   * @deprecated Set the native `aria-label` on the ix-avatar host element\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials?: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   */\n  @Prop() username?: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   */\n  @Prop() extra?: string;\n\n  /**\n   * Text to display in a tooltip when hovering over the avatar\n   *\n   * @since 4.0.0\n   */\n  @Prop() tooltipText?: string;\n\n  /**\n   * aria-label for the tooltip\n   *\n   * @since 4.0.0\n   */\n  @Prop() ariaLabelTooltip?: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement?: HTMLSlotElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private async slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve, reject) => {\n      readTask(() => {\n        const button = this.hostElement.shadowRoot!.querySelector('button');\n        if (button) {\n          resolve(button);\n        } else {\n          reject(new Error('ix-avatar - trigger element not found'));\n        }\n      });\n    });\n  }\n\n  private onDropdownClick(event: MouseEvent) {\n    if (event.target === this.dropdownElement) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const a11yLabel = a11y['aria-label'];\n\n    const tooltipText = this.tooltipText || this.username;\n    const ariaHidden = tooltipText === this.username;\n\n    const Avatar = (\n      <Fragment>\n        <AvatarImage\n          image={this.image}\n          initials={this.initials}\n          a11yLabel={a11yLabel ?? this.a11yLabel}\n        />\n        {!!tooltipText && (\n          <ix-tooltip\n            ref={this.tooltipRef}\n            for={this.hostElement}\n            aria-hidden={a11yBoolean(ariaHidden)}\n            aria-label={this.ariaLabelTooltip}\n          >\n            {tooltipText}\n          </ix-tooltip>\n        )}\n      </Fragment>\n    );\n\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            selected={false}\n            type=\"button\"\n            variant=\"tertiary\"\n          >\n            {Avatar}\n          </BaseButton>\n          <ix-dropdown\n            ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n            onClick={(e) => this.onDropdownClick(e)}\n            onShowChanged={(event) => {\n              if (event.detail && this.tooltipRef.current) {\n                this.tooltipRef.current.hideTooltip(0);\n              }\n            }}\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                  a11yLabel={a11yLabel ?? this.a11yLabel}\n                />\n                {this.hasSlottedElements && (\n                  <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n                )}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return <Host>{Avatar}</Host>;\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@use 'mixins/shadow-dom/component';\n\n:host {\n  display: block;\n  color: var(--theme-color-std-text);\n\n  @include component.ix-component;\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  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxMenuAvatarItemElement;\n\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick!: EventEmitter<MouseEvent>;\n\n  private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.dropdownItemRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <ix-dropdown-item\n        ref={this.dropdownItemRef}\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-avatar_2.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, d as readTask, h, F as Fragment, H as Host, g as getElement, c as createEvent } from './index-O0wJw3od.js';
-import { B as BaseButton } from './base-button-BXCu3_9t.js';
+import { r as registerInstance, d as readTask, h, F as Fragment, H as Host, g as getElement, c as createEvent } from './index-DGODjp4O.js';
+import { B as BaseButton } from './base-button-Bl5hXxqL.js';
 import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
 import { m as makeRef } from './make-ref-bcj7UEIC.js';
 import { c as closestElement, h as hasSlottedElements } from './shadow-dom-i60z1FJC.js';
 
-const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content;}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar>.avatar-initials>ix-typography{margin-top:1px}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{border-radius:100px !important;all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host(.avatar-button) button{padding:0px}:host(.avatar-button) .btn-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host(.avatar-button) .btn-tertiary,:host(.avatar-button) .btn-tertiary.focus,:host(.avatar-button) .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.avatar-button) .avatar{transform:scale(0.8)}";
+const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar>.avatar-initials>ix-typography{margin-top:1px}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{border-radius:100px !important;all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host(.avatar-button) button{padding:0px}:host(.avatar-button) .btn-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host(.avatar-button) .btn-tertiary,:host(.avatar-button) .btn-tertiary.focus,:host(.avatar-button) .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.avatar-button) .avatar{transform:scale(0.8)}";
 
 function DefaultAvatar(props) {
     const { initials } = props;
@@ -70,7 +70,7 @@ const Avatar = class {
 };
 Avatar.style = avatarCss;
 
-const menuAvatarItemCss = ":host{display:block;color:var(--theme-color-std-text);}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
+const menuAvatarItemCss = ":host{display:block;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 
 const MenuAvatarItem = class {
     constructor(hostRef) {

package/dist/esm/ix-basic-navigation.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-O0wJw3od.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-DGODjp4O.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-CKM5pVsv.js';
 import { a as applicationLayoutService } from './service-ktcE7NzB.js';
 import { m as menuController } from './menu-service-BMvtckRa.js';
 import './typed-event-BdCnOrqW.js';
 import './breakpoints-D_Hmobxf.js';
 
-const basicNavigationCss = ":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";
+const basicNavigationCss = ":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";
 
 const BasicNavigation = class {
     constructor(hostRef) {

package/dist/esm/ix-basic-navigation.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-basic-navigation.entry.js","sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-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 'mixins/shadow-dom/component';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  @include component.ix-component;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement!: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable?: Disposable;\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,i1CAAi1C;;MCsB/1C,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAaE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAyB1B;;;AAGG;QACK,IAAW,CAAA,WAAA,GAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAM7C,QAAA,IAAU,CAAA,UAAA,GAAe,IAAI;AAuEvC;IAxGC,kBAAkB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,YAAA,IAAI,EAAE,kBAAkB;AACzB,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU;;AAOvD,IAAA,iBAAiB,CAAC,OAA+B,EAAA;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE;YACpD;;QAGF,wBAAwB,CAAC,0BAA0B,EAAE;AACrD,QAAA,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC;;AASjD,IAAA,mBAAmB,CAAC,WAAyB,EAAA;AAC3C,QAAA,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC;;AAKtD,IAAA,IAAI,IAAI,GAAA;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC;;IAM1C,cAAc,GAAA;;AACpB,QAAA,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B;;QAEF,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,CAAC,KAAK,CAAC;;IAG9B,iBAAiB,GAAA;AACf,QAAA,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC;QAEzD,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,YAAA,IAAI,EAAE,kBAAkB;AACzB,SAAA,CACF;AAED,QAAA,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,KAAI;AAClE,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACxB,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU;AAErD,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;;;IAIhD,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe;;;IAIpD,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,EAAE;;IAGhC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI,CAAC,UAAU;AAC9B,gBAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;aACxC,EAAA,EAEA,CAAC,IAAI,CAAC,UAAU,IACf,CAAA,CAAA,uBAAA,EAAA,EAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,EAAA,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,CAAQ,CACf,IACtB,IAAI,EACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;"}
+{"version":3,"file":"ix-basic-navigation.entry.js","sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-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 'mixins/shadow-dom/component';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  @include component.ix-component;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\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 { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement!: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable?: Disposable;\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-blind.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-O0wJw3od.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-DGODjp4O.js';
 import { a as animate } from './anime.esm-DhE1t8Qh.js';
 import { a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
 import { f as iconChevronDownSmall } from './index-Cz75KU1f.js';
 import { A as Animation } from './animation-C5MWUgDN.js';
 
-const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{padding-inline-end:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-sublabel{padding-inline:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-filled){background-color:var(--theme-blind-base--background)}:host(.blind-filled) .blind-header{background-color:var(--theme-color-filled)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-filled) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-filled) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";
+const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{padding-inline-end:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-sublabel{padding-inline:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-filled) .blind-header{background-color:var(--theme-color-filled)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-filled) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-filled) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-filled){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline){border-color:var(--theme-color-soft-bdr)}";
 
 let sequentialInstanceId = 0;
 const Blind = class {

package/dist/esm/ix-blind.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-blind.entry.js","sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/hover';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'filled') {\n  :host(.blind-#{$variant}) {\n    @if $variant == 'outline' {\n      border: solid\n        var(--theme-blind--border-thickness)\n        var(--theme-blind-base--border-color);\n    }\n\n    .blind-header {\n      @if $variant == 'outline' {\n        background-color: var(--theme-color-ghost);\n      } @else {\n        background-color: var(--theme-color-#{$variant});\n      }\n\n      @if $variant == 'filled' or $variant == 'outline' {\n        @include hover.ghost-hover-pressed;\n      } @else {\n        @include hover.hover {\n          background-color: var(--theme-color-#{$variant}--hover);\n        }\n\n        @include hover.active {\n          background-color: var(--theme-color-#{$variant}--active);\n        }\n      }\n    }\n\n    @if $variant == 'filled' or $variant == 'outline' {\n      .blind-header-title-label {\n        color: var(--theme-color-std-text);\n      }\n      .blind-header-title-sublabel {\n        color: var(--theme-color-soft-text);\n      }\n    } @else {\n      .blind-header-title-label,\n      .blind-header-title-sublabel {\n        color: var(--theme-color-#{$variant}--contrast);\n      }\n    }\n\n    @if $variant == 'outline' {\n      border-color: var(--theme-color-soft-bdr);\n    } @else {\n      background-color: var(--theme-blind-base--background);\n    }\n  }\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  @include component.ix-component;\n\n  .blind-header-wrapper {\n    position: relative;\n    min-height: 3rem;\n    height: 3rem;\n    overflow: hidden;\n  }\n\n  .blind-header-content {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    padding-left: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    flex-grow: 1;\n    margin-right: 0.5rem;\n  }\n\n  .blind-header {\n    all: unset;\n    @include text-truncation.ellipsis;\n\n    display: block;\n    position: absolute;\n\n    top: 0px;\n    left: 0px;\n\n    pointer-events: all;\n\n    padding-left: 2.5rem;\n    min-height: 3rem;\n    height: 3rem;\n    width: calc(100% - 2 * var(--theme-blind--border-thickness));\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    cursor: pointer;\n\n    @include hover.focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n  }\n\n  .blind-header-title-icon,\n  .collapse-icon {\n    margin-right: vars.$small-space;\n  }\n\n  .blind-header-title-row {\n    display: flex;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .blind-header-title-col {\n    display: inline-flex;\n    align-items: center;\n    width: calc(100% - 1rem);\n    overflow: hidden;\n  }\n\n  .blind-header-title-col:not(:first-of-type) {\n    justify-content: flex-end;\n  }\n  ix-typography {\n    flex-grow: 1;\n    @include text-truncation.ellipsis;\n  }\n\n  .blind-header-title-label {\n    padding-inline-end: 0.5rem;\n    @include text-truncation.ellipsis;\n  }\n\n  .blind-header-title-sublabel {\n    padding-inline: 0.5rem;\n    @include text-truncation.ellipsis;\n  }\n\n  .blind-header-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  .blind-header-labels {\n    display: inline-flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: var(--theme-default-time);\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n\n  .header-actions {\n    pointer-events: all;\n    margin-left: auto;\n  }\n}\n\n$blind-variants: (\n  alarm,\n  critical,\n  info,\n  neutral,\n  filled,\n  success,\n  warning,\n  primary,\n  outline\n);\n\n@each $variant in $blind-variants {\n  @include blind($variant);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\nimport type { BlindVariant } from './blind.types';\nimport Animation from '../utils/animation';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label?: string;\n\n  /**\n   * Secondary label inside blind header\n   */\n  @Prop() sublabel?: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Blind variant\n   */\n  @Prop() variant: BlindVariant = 'filled';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef?: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot!.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronDown();\n    } else {\n      this.rotateChevronUp();\n    }\n  }\n\n  private rotateChevronUp() {\n    animate(this.chevronRef!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      rotateZ: 180,\n    });\n    animate(this.content!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronDown() {\n    animate(this.chevronRef!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    animate(this.content!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={iconChevronDownSmall}\n              color={\n                this.variant === 'filled' || this.variant === 'outline'\n                  ? 'color-std-text'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref: HTMLElement | undefined) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'filled' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-blind.entry.js","sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use './common-variables' as vars;\n@use 'legacy/mixins/fonts';\n@use 'mixins/hover';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'filled') {\n  :host(.blind-#{$variant}) {\n    @if $variant == 'outline' {\n      border: solid\n        var(--theme-blind--border-thickness)\n        var(--theme-blind-base--border-color);\n    }\n\n    .blind-header {\n      @if $variant == 'outline' {\n        background-color: var(--theme-color-ghost);\n      } @else {\n        background-color: var(--theme-color-#{$variant});\n      }\n\n      @if $variant == 'filled' or $variant == 'outline' {\n        @include hover.ghost-hover-pressed;\n      } @else {\n        @include hover.hover {\n          background-color: var(--theme-color-#{$variant}--hover);\n        }\n\n        @include hover.active {\n          background-color: var(--theme-color-#{$variant}--active);\n        }\n      }\n    }\n\n    @if $variant == 'filled' or $variant == 'outline' {\n      .blind-header-title-label {\n        color: var(--theme-color-std-text);\n      }\n      .blind-header-title-sublabel {\n        color: var(--theme-color-soft-text);\n      }\n    } @else {\n      .blind-header-title-label,\n      .blind-header-title-sublabel {\n        color: var(--theme-color-#{$variant}--contrast);\n      }\n    }\n\n    @if $variant == 'outline' {\n      border-color: var(--theme-color-soft-bdr);\n    } @else {\n      background-color: var(--theme-blind-base--background);\n    }\n  }\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  @include component.ix-component;\n\n  .blind-header-wrapper {\n    position: relative;\n    min-height: 3rem;\n    height: 3rem;\n    overflow: hidden;\n  }\n\n  .blind-header-content {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    padding-left: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    flex-grow: 1;\n    margin-right: 0.5rem;\n  }\n\n  .blind-header {\n    all: unset;\n    @include text-truncation.ellipsis;\n\n    display: block;\n    position: absolute;\n\n    top: 0px;\n    left: 0px;\n\n    pointer-events: all;\n\n    padding-left: 2.5rem;\n    min-height: 3rem;\n    height: 3rem;\n    width: calc(100% - 2 * var(--theme-blind--border-thickness));\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    cursor: pointer;\n\n    @include hover.focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n  }\n\n  .blind-header-title-icon,\n  .collapse-icon {\n    margin-right: vars.$small-space;\n  }\n\n  .blind-header-title-row {\n    display: flex;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .blind-header-title-col {\n    display: inline-flex;\n    align-items: center;\n    width: calc(100% - 1rem);\n    overflow: hidden;\n  }\n\n  .blind-header-title-col:not(:first-of-type) {\n    justify-content: flex-end;\n  }\n  ix-typography {\n    flex-grow: 1;\n    @include text-truncation.ellipsis;\n  }\n\n  .blind-header-title-label {\n    padding-inline-end: 0.5rem;\n    @include text-truncation.ellipsis;\n  }\n\n  .blind-header-title-sublabel {\n    padding-inline: 0.5rem;\n    @include text-truncation.ellipsis;\n  }\n\n  .blind-header-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  .blind-header-labels {\n    display: inline-flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: var(--theme-default-time);\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n\n  .header-actions {\n    pointer-events: all;\n    margin-left: auto;\n  }\n}\n\n$blind-variants: (\n  alarm,\n  critical,\n  info,\n  neutral,\n  filled,\n  success,\n  warning,\n  primary,\n  outline\n);\n\n@each $variant in $blind-variants {\n  @include blind($variant);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\nimport type { BlindVariant } from './blind.types';\nimport Animation from '../utils/animation';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label?: string;\n\n  /**\n   * Secondary label inside blind header\n   */\n  @Prop() sublabel?: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Blind variant\n   */\n  @Prop() variant: BlindVariant = 'filled';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef?: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot!.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronDown();\n    } else {\n      this.rotateChevronUp();\n    }\n  }\n\n  private rotateChevronUp() {\n    animate(this.chevronRef!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      rotateZ: 180,\n    });\n    animate(this.content!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronDown() {\n    animate(this.chevronRef!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    animate(this.content!, {\n      duration: Animation.defaultTime,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={iconChevronDownSmall}\n              color={\n                this.variant === 'filled' || this.variant === 'outline'\n                  ? 'color-std-text'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref: HTMLElement | undefined) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'filled' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}