@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -0,0 +1 @@
+{"file":"ix-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/application-sidebar/events.ts","./src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","./src/components/menu/menu.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\nexport class ApplicationSidebarToggleEvent extends Event {\n  public constructor(public readonly force?: boolean) {\n    super('application-sidebar-toggle', { bubbles: true, composed: true });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  height: 100%;\n  min-height: 22.75rem;\n  z-index: var(--theme-z-index-sticky);\n  width: auto;\n\n  bottom: 0px;\n\n  .tabs {\n    height: 100%;\n    position: relative;\n    overflow-y: auto;\n    pointer-events: all;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .tabs-shadow-container {\n    overflow: hidden;\n    display: block;\n    position: relative;\n    margin-bottom: 2rem;\n  }\n\n  .tabs--shadow {\n    opacity: 0;\n    position: absolute;\n    width: 100%;\n    height: 0.625rem;\n\n    background: linear-gradient(var(--theme-color-shadow-1), transparent);\n    pointer-events: none;\n    z-index: var(--theme-z-index-sticky);\n\n    transition: opacity var(--theme-default-time);\n  }\n  .tabs--shadow-top {\n    top: 0px;\n    background: linear-gradient(var(--theme-color-shadow-1), transparent);\n  }\n\n  .tabs--shadow-bottom {\n    bottom: 0px;\n    background: linear-gradient(transparent, var(--theme-color-shadow-1));\n  }\n\n  .tabs--shadow--show {\n    opacity: 1;\n  }\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 3.25rem;\n    height: 100%;\n    padding-block-end: 1rem;\n    overflow: hidden;\n\n    &.expanded {\n      box-shadow: var(--theme-navigation--box-shadow);\n    }\n\n    background-color: var(--theme-nav--background);\n    transition: width var(--animate-duration) ease-in-out;\n\n    .burger-menu {\n      margin: 0.75rem 0 1rem 0.35rem;\n    }\n  }\n\n  .menu-overlay {\n    display: none;\n    position: absolute;\n    width: calc(100vw - 3.25rem);\n    height: 100%;\n    left: 3.25rem;\n    z-index: -1;\n    backdrop-filter: blur(1rem);\n    background-color: var(--theme-sidebar-overlay-blur);\n    transition: left var(--animate-duration) ease-in-out;\n  }\n\n  .menu-overlay.visible {\n    display: block;\n  }\n\n  .menu.expanded {\n    width: $menu-expanded-width;\n  }\n\n  .menu-overlay.expanded {\n    width: calc(100vw - $menu-expanded-width);\n    left: $menu-expanded-width;\n  }\n\n  .menu-overlay-container {\n    display: contents;\n  }\n\n  .menu-avatar {\n    max-height: 3rem;\n  }\n\n  .avatar {\n    margin-bottom: 2rem;\n  }\n\n  #cui-imprint {\n    .cui-imprint-product-name {\n      margin-bottom: $default-space;\n    }\n\n    .cui-imprint-product-description {\n      margin-bottom: $x-large-space;\n    }\n\n    .cui-imprint-link-container {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .bottom-tab-divider {\n    margin-top: auto;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .menu:not(.expanded) {\n    width: 0;\n  }\n\n  .menu {\n    padding-top: 2rem;\n  }\n\n  .menu .burger-menu {\n    display: none;\n  }\n\n  .menu-overlay {\n    left: 0px;\n    width: 100vw;\n  }\n}\n\n:host(.breakpoint-lg) {\n  position: relative;\n\n  .menu.expanded {\n    box-shadow: none;\n  }\n}\n\n:host {\n  ::slotted(a[href]) {\n    all: unset;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n  tag: 'ix-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  @Element() hostElement!: HTMLIxMenuElement;\n\n  /**\n   * Is settings tab visible\n   */\n  @Prop({ mutable: true }) showSettings = false;\n\n  /**\n   * Is about tab visible\n   */\n  @Prop({ mutable: true }) showAbout = false;\n\n  /**\n   * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n   */\n  @Prop() enableToggleTheme = false;\n\n  /**\n   * Is settings tab is visible\n   */\n  @Prop() enableSettings = true;\n\n  /**\n   * Internal\n   */\n  @Prop() enableMapExpand = false;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationDescription = '';\n\n  /**\n   * Maximum number of menu items to show in case enough vertical space is available.\n   * Extra menu items will be collapsed to 'show more' menu item.\n   */\n  @Prop() maxVisibleMenuItems = 9;\n\n  /**\n   * Accessibility i18n label for the burger menu of the sidebar\n   */\n  @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n  /**\n   */\n  @Prop({ mutable: true, reflect: true }) expand = false;\n\n  /**\n   * Menu stays pinned to the left\n   */\n  @Prop() pinned = false;\n  @Watch('pinned')\n  pinnedChange(newPinned: boolean) {\n    if (this.applicationLayoutContext?.host === 'map-navigation') {\n      console.warn('ix-map-navigation does not support pinning of the menu');\n      return;\n    }\n    this.setPinned(this.pinned);\n    if (newPinned) {\n      applicationLayoutService.disableBreakpointDetection();\n      applicationLayoutService.setBreakpoint('lg');\n      return;\n    }\n\n    applicationLayoutService.enableBreakpointDetection();\n  }\n\n  /**\n   */\n  @Prop() i18nLegal = 'About & legal information';\n\n  /**\n   */\n  @Prop() i18nSettings = 'Settings';\n\n  /**\n   */\n  @Prop() i18nToggleTheme = 'Toggle theme';\n\n  /**\n   */\n  @Prop() i18nExpand = ' Expand';\n\n  /**\n   */\n  @Prop() i18nCollapse = 'Collapse';\n\n  /**\n   * Menu expanded\n   */\n  @Event() expandChange: EventEmitter<boolean>;\n\n  /**\n   * Map Sidebar expanded\n   */\n  @Event() mapExpandChange: EventEmitter<boolean>;\n\n  @State() showPinned = false;\n  @State() mapExpand = true;\n  @State() activeTab: HTMLIxMenuItemElement | null;\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() itemsScrollShadowTop = false;\n  @State() itemsScrollShadowBottom = false;\n  @State() applicationLayoutContext: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n  private isTransitionDisabled = false;\n\n  // FBC IAM workaround #488\n  private readonly isVisible = (elm: HTMLElement) => {\n    return (\n      elm.style.display !== 'none' &&\n      elm.parentElement?.parentElement?.style.display !== 'none'\n    );\n  };\n\n  get popoverArea() {\n    return this.hostElement.shadowRoot!.querySelector('#popover-area');\n  }\n\n  get menu() {\n    return this.hostElement.shadowRoot!.querySelector('.menu');\n  }\n\n  get menuItemsContainer(): HTMLDivElement {\n    return this.menu!.querySelector('.tabs')!;\n  }\n\n  get overlayContainer() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.menu-overlay'\n    ) as HTMLDivElement;\n  }\n\n  get menuItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get menuBottomItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get homeTab() {\n    return this.hostElement.querySelector('ix-menu-item.home-tab');\n  }\n\n  get moreItemsDropdown(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.internal-tab ix-dropdown'\n    )!;\n  }\n\n  get isMoreItemsDropdownEmpty(): boolean {\n    return (\n      this.hostElement.shadowRoot!.querySelectorAll(\n        '.internal-tab ix-dropdown .appended'\n      ).length === 0\n    );\n  }\n\n  get moreItemsDropdownItems() {\n    return this.hostElement.shadowRoot!.querySelectorAll(\n      '.internal-tab ix-dropdown ix-menu-item'\n    );\n  }\n\n  get activeMoreTabContainer() {\n    return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n  }\n\n  get activeMoreTab() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.active-more-tab ix-menu-item'\n    );\n  }\n\n  get aboutPopoverContainer(): HTMLElement {\n    return this.hostElement.querySelector('.about-news')!;\n  }\n\n  get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n    return (\n      document.querySelector('ix-menu-about-news') ??\n      this.hostElement.querySelector('ix-menu-about-news')!\n    );\n  }\n\n  get aboutTab(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n  }\n\n  get about(): HTMLIxMenuAboutElement | null {\n    return this.hostElement.querySelector('ix-menu-about');\n  }\n\n  get settings(): HTMLIxMenuSettingsElement | null {\n    return this.hostElement.querySelector('ix-menu-settings');\n  }\n\n  get isSettingsEmpty(): boolean {\n    return (\n      Array.from(\n        this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n      ).length === 0\n    );\n  }\n\n  get tabsContainer() {\n    return this.hostElement;\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.handleOverflowIndicator();\n    });\n\n    if (this.pinned) {\n      this.pinnedChange(this.pinned);\n    }\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        this.applicationLayoutContext = ctx;\n        if (ctx.hideHeader === true) {\n          this.onBreakpointChange('md');\n          return;\n        }\n\n        this.onBreakpointChange(applicationLayoutService.breakpoint);\n      },\n      true\n    );\n\n    menuController.register(this.hostElement);\n    applicationLayoutService.onChange.on((breakpoint) =>\n      this.onBreakpointChange(breakpoint)\n    );\n    this.onBreakpointChange(applicationLayoutService.breakpoint);\n  }\n\n  componentWillRender() {\n    this.appendTabs();\n  }\n\n  componentDidRender() {\n    this.appendFragments();\n  }\n\n  private setPinned(pinned: boolean) {\n    this.showPinned = pinned;\n    menuController.setIsPinned(pinned);\n  }\n\n  private onBreakpointChange(mode: Breakpoint) {\n    if (!this.applicationLayoutContext && mode === 'sm') {\n      return;\n    }\n    if (this.applicationLayoutContext?.host === 'map-navigation') {\n      this.breakpoint = 'md';\n      return;\n    }\n    if (!this.applicationLayoutContext) {\n      return;\n    }\n\n    if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n      return;\n    }\n\n    this.breakpoint = mode;\n\n    if (this.breakpoint === 'lg') {\n      this.setPinned(true);\n      this.toggleMenu(true);\n      return;\n    }\n\n    this.setPinned(false);\n    this.toggleMenu(false);\n  }\n\n  private appendFragments() {\n    this.appendAboutNewsPopover();\n  }\n\n  private resetActiveTab() {\n    this.activeTab = null;\n  }\n\n  private appendTabs() {\n    this.activeTab = null;\n  }\n\n  private getAboutPopoverVerticalPosition() {\n    const heightArrow = 12;\n    const offsetArrow = 6;\n    const rectAbout = this.aboutTab.getBoundingClientRect();\n    const offset =\n      window.innerHeight -\n      (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n    return convertToRemString(offset);\n  }\n\n  private appendAboutNewsPopover() {\n    if (!this.aboutNewsPopover) {\n      return;\n    }\n\n    this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n    if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n      const showMore = () => {\n        if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n          this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n          this.toggleAbout(true);\n        }\n      };\n\n      this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n      document.body.appendChild(this.aboutNewsPopover);\n    }\n  }\n\n  /**\n   * Toggle map sidebar expand\n   * @param show\n   */\n  @Method()\n  async toggleMapExpand(show?: boolean) {\n    if (show !== undefined) {\n      this.mapExpand = show;\n    } else {\n      this.mapExpand = !this.mapExpand;\n    }\n  }\n\n  /**\n   * Toggle menu\n   * @param show\n   */\n  @Method()\n  async toggleMenu(show?: boolean) {\n    if (show !== undefined) {\n      this.expand = show;\n    } else {\n      this.expand = !this.expand;\n    }\n\n    if (this.aboutNewsPopover) {\n      this.aboutNewsPopover.expanded = this.expand;\n    }\n\n    this.expandChange.emit(this.expand);\n\n    this.isTransitionDisabled = false;\n    this.checkTransition();\n  }\n\n  /**\n   * Disable transition of overlay while menu animation is running.\n   */\n  private checkTransition() {\n    const container = this.overlayContainer;\n\n    if (!container) {\n      return;\n    }\n\n    if (this.isTransitionDisabled) {\n      container.style.transitionProperty = 'left';\n    } else {\n      container.style.transitionProperty = 'all';\n    }\n  }\n\n  private isOverlayVisible() {\n    return this.showAbout || this.showSettings;\n  }\n\n  /**\n   * Toggle Settings tabs\n   * @param show\n   */\n  @Method()\n  async toggleSettings(show: boolean) {\n    if (!this.settings) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showSettings = show;\n      this.settings.show = this.showSettings;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  /**\n   * Toggle About tabs\n   * @param show\n   */\n  @Method()\n  async toggleAbout(show: boolean) {\n    if (!this.about) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showAbout = show;\n      this.about.show = this.showAbout;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  private resetOverlay() {\n    this.showSettings = false;\n    this.showAbout = false;\n\n    if (this.settings) {\n      this.settings.show = false;\n    }\n\n    if (this.about) {\n      this.about.show = false;\n    }\n  }\n\n  private getCollapseText() {\n    return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n  }\n\n  private getCollapseIcon() {\n    return this.mapExpand ? 'navigation-left' : 'navigation-right';\n  }\n\n  private isMenuItemClicked(event: Event) {\n    if (event.target instanceof HTMLElement) {\n      return event.target.tagName === 'IX-MENU-ITEM';\n    }\n\n    return false;\n  }\n\n  @Listen('resize', { target: 'window' })\n  private handleOverflowIndicator() {\n    const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n    this.itemsScrollShadowTop = scrollTop > 0;\n    this.itemsScrollShadowBottom =\n      Math.round(scrollTop + clientHeight) < scrollHeight;\n  }\n\n  @Listen('close')\n  onOverlayClose() {\n    this.animateOverlayFadeOut(() => {\n      this.resetOverlay();\n    });\n  }\n\n  private animateOverlayFadeIn() {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: [0, 'blur(1rem)'],\n        translateX: ['-4rem', 0],\n        opacity: [0, 1],\n        easing: 'easeInSine',\n        begin: () => {\n          if (this.showPinned) {\n            return;\n          }\n\n          this.toggleMenu(false);\n        },\n      });\n    });\n  }\n\n  private animateOverlayFadeOut(onComplete: Function) {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: ['blur(1rem)', 0],\n        translateX: [0, '-4rem'],\n        opacity: [1, 0],\n        easing: 'easeInSine',\n        complete: () => onComplete(),\n      });\n    });\n  }\n\n  private onMenuItemsClick(event: Event) {\n    if (this.isMenuItemClicked(event)) {\n      if (!this.showPinned) {\n        this.toggleMenu(false);\n      }\n      this.onOverlayClose();\n    }\n  }\n\n  private isHiddenFromViewport() {\n    return this.breakpoint === 'sm' && this.expand === false;\n  }\n\n  private sidebarToggle() {\n    this.mapExpandChange.emit(this.mapExpand);\n\n    this.hostElement.dispatchEvent(\n      new ApplicationSidebarToggleEvent(this.mapExpand)\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expand,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"menu\"\n      >\n        <aside\n          class={{\n            menu: true,\n            expanded: this.expand,\n          }}\n          onClick={() => {\n            this.resetActiveTab();\n          }}\n        >\n          <ix-burger-menu\n            onClick={async () => this.toggleMenu()}\n            expanded={this.expand}\n            ixAriaLabel={this.i18nExpandSidebar}\n            pinned={this.showPinned}\n            class={{\n              'burger-menu': true,\n            }}\n          ></ix-burger-menu>\n          <div class=\"menu-avatar\">\n            <slot name=\"ix-menu-avatar\"></slot>\n          </div>\n\n          <div\n            id=\"menu-tabs\"\n            style={{\n              display: 'contents',\n            }}\n            onClick={(e) => this.onMenuItemsClick(e)}\n          >\n            <div class=\"tabs-top\">\n              <slot name=\"home\"></slot>\n            </div>\n            <div class=\"tabs-shadow-container\">\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-top': true,\n                  'tabs--shadow--show': this.itemsScrollShadowTop,\n                }}\n              ></div>\n              <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n                {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n                  <slot></slot>\n                ) : null}\n              </div>\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-bottom': true,\n                  'tabs--shadow--show': this.itemsScrollShadowBottom,\n                }}\n              ></div>\n            </div>\n          </div>\n          <div class=\"bottom-tab-divider\"></div>\n          {this.settings ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"settings\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showSettings,\n              }}\n              icon={'cogwheel'}\n              onClick={async () => this.toggleSettings(!this.showSettings)}\n            >\n              {this.i18nSettings}\n            </ix-menu-item>\n          ) : null}\n          <div onClick={(e) => this.onMenuItemsClick(e)}>\n            <slot name=\"bottom\"></slot>\n          </div>\n\n          <div id=\"popover-area\"></div>\n          {this.about ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"aboutAndLegal\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showAbout,\n              }}\n              icon={'info'}\n              onClick={async () => this.toggleAbout(!this.showAbout)}\n            >\n              {this.i18nLegal}\n            </ix-menu-item>\n          ) : null}\n          {this.enableToggleTheme ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"toggleTheme\"\n              onClick={() => themeSwitcher.toggleMode()}\n              class=\"internal-tab bottom-tab\"\n              icon={'bulb'}\n            >\n              {this.i18nToggleTheme}\n            </ix-menu-item>\n          ) : null}\n          {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"menu-collapse\"\n              onClick={() => this.sidebarToggle()}\n              class=\"internal-tab bottom-tab\"\n              icon={`${this.getCollapseIcon()}`}\n            >\n              {this.getCollapseText()}\n            </ix-menu-item>\n          ) : null}\n        </aside>\n        <div\n          class={{\n            'menu-overlay': true,\n            visible: this.isOverlayVisible(),\n            expanded: this.expand,\n          }}\n          onTransitionEnd={() => {\n            this.isTransitionDisabled = true;\n            this.checkTransition();\n          }}\n        >\n          <div class={'menu-overlay-container'}>\n            {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n          </div>\n          <div class={'menu-overlay-container'}>\n            {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-message-bar.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-eb0be730.js';
 import { a as anime } from './anime.es-185e9087.js';
 
-const messageBarCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;margin:0.5rem 0.5rem 0rem 0.5rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:bold;white-space:normal}:host ix-icon{margin-top:0.25rem}";
+const messageBarCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;margin:0.5rem 0.5rem 0rem 0.5rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:bold;white-space:normal}:host ix-icon{margin-top:0.25rem}";
 
 const MessageBar = class {
   constructor(hostRef) {
@@ -39,7 +39,7 @@ const MessageBar = class {
     this.closedChange.emit();
   }
   render() {
-    return (h(Host, null, h("div", { class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { color: this.color, name: this.icon }), h("div", { class: "message-content" }, h("slot", null)), this.dismissible ? (h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => {
+    return (h(Host, null, h("div", { class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { color: this.color, name: this.icon }), h("div", { class: "message-content" }, h("slot", null)), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
         this.closeAlert(this.divElement);
       }, "data-testid": "close-btn" })) : (''))));
   }

package/dist/esm/ix-message-bar.entry.js.map

@@ -1 +1 @@
-{"file":"ix-message-bar.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,49BAA49B;;MC0Br+B,UAAU;;;;gBAIyB,MAAM;uBAK9B,IAAI;;;;EAe1B,mBAAmB;IACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;MACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;MACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;KAC3B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;MACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;KAC9B;GACF;EAEO,UAAU,CAAC,EAAe;IAChC,KAAK,CAAC;MACJ,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,UAAU,CAAC,QAAQ;MAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,QAAQ,EAAE;QACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC5B;KACF,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAElD,eAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACvD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,EACL,IAAI,CAAC,WAAW,IACf,sBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE;QACP,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;OAClC,iBACW,WAAW,GACP,KAElB,EAAE,CACH,CACG,CACD,EACP;GACH;;AA9DuB,mBAAQ,GAAG,GAAG,CAAC;;;;;","names":[],"sources":["./src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=shadow","./src/components/message-bar/message-bar.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@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .message-container {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    min-height: 3.375rem;\n    margin: $small-space $small-space 0rem $small-space;\n    padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $medium-space\n      calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $default-space;\n    border-radius: var(--theme-message-bar--border-radius);\n    background-color: var(--theme-messagebar--background);\n  }\n\n  .danger {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-alarm);\n  }\n\n  .warning {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-warning);\n  }\n\n  .info {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-info);\n  }\n\n  .message-content {\n    @include ellipsis;\n    flex-grow: 1;\n    align-self: center;\n    min-height: 1.25rem;\n    padding: 0 $default-space;\n    font-weight: bold;\n    white-space: normal;\n  }\n\n  ix-icon {\n    margin-top: $tiny-space;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  shadow: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type: 'danger' | 'warning' | 'info' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange: EventEmitter;\n\n  @State() icon: 'error' | 'warning' | 'info';\n\n  @State() color: NotificationColor;\n\n  private static readonly duration = 300;\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    if (this.type === 'danger') {\n      this.icon = 'error';\n      this.color = 'color-alarm';\n    }\n\n    if (this.type === 'info') {\n      this.icon = 'info';\n      this.color = 'color-info';\n    }\n\n    if (this.type === 'warning') {\n      this.icon = 'warning';\n      this.color = 'color-warning';\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: MessageBar.duration,\n      opacity: [1, 0],\n      easing: 'easeOutSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n    this.closedChange.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                this.closeAlert(this.divElement);\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-message-bar.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,kgDAAkgD;;MC0B3gD,UAAU;;;;gBAIyB,MAAM;uBAK9B,IAAI;;;;EAe1B,mBAAmB;IACjB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;MACpB,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MACxB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;MACnB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;KAC3B;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;MACtB,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;KAC9B;GACF;EAEO,UAAU,CAAC,EAAe;IAChC,KAAK,CAAC;MACJ,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,UAAU,CAAC,QAAQ;MAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,QAAQ,EAAE;QACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC5B;KACF,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAElD,eAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EACvD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,EACL,IAAI,CAAC,WAAW,IACf,sBACE,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,OAAO,EAAE;QACP,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;OAClC,iBACW,WAAW,GACP,KAElB,EAAE,CACH,CACG,CACD,EACP;GACH;;AA9DuB,mBAAQ,GAAG,GAAG,CAAC;;;;;","names":[],"sources":["./src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=shadow","./src/components/message-bar/message-bar.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@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .message-container {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    min-height: 3.375rem;\n    margin: $small-space $small-space 0rem $small-space;\n    padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $medium-space\n      calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $default-space;\n    border-radius: var(--theme-message-bar--border-radius);\n    background-color: var(--theme-messagebar--background);\n  }\n\n  .danger {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-alarm);\n  }\n\n  .warning {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-warning);\n  }\n\n  .info {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-info);\n  }\n\n  .message-content {\n    @include ellipsis;\n    flex-grow: 1;\n    align-self: center;\n    min-height: 1.25rem;\n    padding: 0 $default-space;\n    font-weight: bold;\n    white-space: normal;\n  }\n\n  ix-icon {\n    margin-top: $tiny-space;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  shadow: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type: 'danger' | 'warning' | 'info' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange: EventEmitter;\n\n  @State() icon: 'error' | 'warning' | 'info';\n\n  @State() color: NotificationColor;\n\n  private static readonly duration = 300;\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    if (this.type === 'danger') {\n      this.icon = 'error';\n      this.color = 'color-alarm';\n    }\n\n    if (this.type === 'info') {\n      this.icon = 'info';\n      this.color = 'color-info';\n    }\n\n    if (this.type === 'warning') {\n      this.icon = 'warning';\n      this.color = 'color-warning';\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: MessageBar.duration,\n      opacity: [1, 0],\n      easing: 'easeOutSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n    this.closedChange.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                this.closeAlert(this.divElement);\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-modal-content.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
-const modalContentCss = ":host{display:block;position:relative;overflow:auto;padding:0.125rem 0.625rem 0.125rem 0.625rem}:host *,:host *::after,:host *::before{box-sizing:border-box}";
+const modalContentCss = ":host{display:block;position:relative;overflow:auto;padding:0.125rem 0.625rem 0.125rem 0.625rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 ModalContent = class {
   constructor(hostRef) {

package/dist/esm/ix-modal-content.entry.js.map

@@ -1 +1 @@
-{"file":"ix-modal-content.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+JAA+J;;MCmB1K,YAAY;;;;EACvB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;","names":[],"sources":["./src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","./src/components/modal-content/modal-content.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0.125rem 0.625rem 0.125rem 0.625rem;\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, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-modal-content.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8rBAA8rB;;MCmBzsB,YAAY;;;;EACvB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;","names":[],"sources":["./src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","./src/components/modal-content/modal-content.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0.125rem 0.625rem 0.125rem 0.625rem;\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, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-modal-example.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
 import './animation-268dce50.js';
 import { d as dismissModal, c as closeModal } from './modal-68c6d3f6.js';
 import './typed-event-a230184a.js';
@@ -14,7 +14,7 @@ const ModalExample = class {
     closeModal(this.host, 'Done!');
   }
   render() {
-    return (h(Host, null, h("div", null, h("div", { class: "modal-header" }, "Message headline", h("ix-icon-button", { "data-close-button": true, ghost: true, icon: "close", onClick: () => this.dismiss() })), h("div", { class: "modal-body" }, "Message text lorem ipsum"), h("div", { class: "modal-footer" }, h("ix-button", { outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { onClick: () => this.close() }, "OK")))));
+    return (h(Host, null, h("div", null, h("div", { class: "modal-header" }, "Message headline", h("ix-icon-button", { "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { class: "modal-body" }, "Message text lorem ipsum"), h("div", { class: "modal-footer" }, h("ix-button", { outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { onClick: () => this.close() }, "OK")))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/ix-modal-example.entry.js.map

@@ -1 +1 @@
-{"file":"ix-modal-example.entry.js","mappings":";;;;;MAea,YAAY;;;;EAGf,OAAO;IACb,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACzB;EAEO,KAAK;IACX,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,WAAK,KAAK,EAAC,cAAc,wBAEvB,iDAEE,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,GACb,CACd,EACN,WAAK,KAAK,EAAC,YAAY,+BAA+B,EACtD,WAAK,KAAK,EAAC,cAAc,IACvB,iBAAW,OAAO,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,aAEpC,EACZ,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,SAAgB,CAClD,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/my-component/example-modal.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\nimport { Component, Element, h, Host } from '@stencil/core';\nimport { closeModal, dismissModal } from '../utils/modal';\n\n@Component({\n  tag: 'ix-modal-example',\n})\nexport class ModalExample {\n  @Element() host!: HTMLIxModalExampleElement;\n\n  private dismiss() {\n    dismissModal(this.host);\n  }\n\n  private close() {\n    closeModal(this.host, 'Done!');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div class=\"modal-header\">\n            Message headline\n            <ix-icon-button\n              data-close-button\n              ghost\n              icon=\"close\"\n              onClick={() => this.dismiss()}\n            ></ix-icon-button>\n          </div>\n          <div class=\"modal-body\">Message text lorem ipsum</div>\n          <div class=\"modal-footer\">\n            <ix-button outline onClick={() => this.dismiss()}>\n              Cancel\n            </ix-button>\n            <ix-button onClick={() => this.close()}>OK</ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-modal-example.entry.js","mappings":";;;;;MAea,YAAY;;;;EAGf,OAAO;IACb,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACzB;EAEO,KAAK;IACX,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,WAAK,KAAK,EAAC,cAAc,wBAEvB,iDAEE,KAAK,QACL,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,GACb,CACd,EACN,WAAK,KAAK,EAAC,YAAY,+BAA+B,EACtD,WAAK,KAAK,EAAC,cAAc,IACvB,iBAAW,OAAO,QAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,aAEpC,EACZ,iBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,SAAgB,CAClD,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/my-component/example-modal.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\nimport { Component, Element, h, Host } from '@stencil/core';\nimport { closeModal, dismissModal } from '../utils/modal';\n\n@Component({\n  tag: 'ix-modal-example',\n})\nexport class ModalExample {\n  @Element() host!: HTMLIxModalExampleElement;\n\n  private dismiss() {\n    dismissModal(this.host);\n  }\n\n  private close() {\n    closeModal(this.host, 'Done!');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div class=\"modal-header\">\n            Message headline\n            <ix-icon-button\n              data-close-button\n              ghost\n              icon={'close'}\n              onClick={() => this.dismiss()}\n            ></ix-icon-button>\n          </div>\n          <div class=\"modal-body\">Message text lorem ipsum</div>\n          <div class=\"modal-footer\">\n            <ix-button outline onClick={() => this.dismiss()}>\n              Cancel\n            </ix-button>\n            <ix-button onClick={() => this.close()}>OK</ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-modal-footer.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
-const modalFooterCss = ":host{display:flex;padding:0.625rem;padding-top:1.5rem;justify-content:flex-end;align-items:center;gap:0.5rem;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}";
+const modalFooterCss = ":host{display:flex;padding:0.625rem;padding-top:1.5rem;justify-content:flex-end;align-items:center;gap:0.5rem;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 ModalFooter = class {
   constructor(hostRef) {

package/dist/esm/ix-modal-footer.entry.js.map

@@ -1 +1 @@
-{"file":"ix-modal-footer.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,gMAAgM;;MCmB1M,WAAW;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;","names":[],"sources":["./src/components/modal-footer/modal-footer.scss?tag=ix-modal-footer&encapsulation=shadow","./src/components/modal-footer/modal-footer.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.625rem;\n  padding-top: 1.5rem;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\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, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-footer',\n  styleUrl: 'modal-footer.scss',\n  shadow: true,\n})\nexport class ModalFooter {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-modal-footer.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+tBAA+tB;;MCmBzuB,WAAW;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;","names":[],"sources":["./src/components/modal-footer/modal-footer.scss?tag=ix-modal-footer&encapsulation=shadow","./src/components/modal-footer/modal-footer.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.625rem;\n  padding-top: 1.5rem;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 0.5rem;\n  align-self: stretch;\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, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-footer',\n  styleUrl: 'modal-footer.scss',\n  shadow: true,\n})\nexport class ModalFooter {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-modal-header.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7334ee80.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
 
-const modalHeaderCss = ":host{display:flex;padding:2px 16px 16px 10px;align-items:center;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .modal-close{margin-left:auto;margin-right:-20px}:host .modal-icon{margin-right:1rem}";
+const modalHeaderCss = ":host{display:flex;padding:2px 16px 16px 10px;align-items:center;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .modal-close{margin-left:auto;margin-right:-20px}:host .modal-icon{margin-right:1rem}";
 
 const ModalHeader = class {
   constructor(hostRef) {

package/dist/esm/ix-modal-header.entry.js.map

@@ -1 +1 @@
-{"file":"ix-modal-header.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,8OAA8O;;MC4BxP,WAAW;;;;qBAMF,KAAK;;;;EAOzB,YAAY,CAAC,IAAY;IACvB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAC9C;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACjD;GACF;EAcD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC9B;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;MACjD,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,IAAI,IACR,eACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,IACT,IAAI,EACR,qBAAe,OAAO,EAAE,eAAe,IACrC,eAAa,CACC,EACf,CAAC,IAAI,CAAC,SAAS,IACd,sBACE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,IAChB,IAAI,CACH,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","./src/components/modal-header/modal-header.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 2px 16px 16px 10px;\n  align-items: center;\n  align-self: stretch;\n\n  .modal-close {\n    margin-left: auto;\n    margin-right: -20px;\n  }\n\n  .modal-icon {\n    margin-right: 1rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (icon) {\n      this.parentDialog.classList.add('with-icon');\n    } else {\n      this.parentDialog.classList.remove('with-icon');\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Close icon is clicked\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = this.hostElement.closest('ix-modal');\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-modal-header.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,6wBAA6wB;;MC4BvxB,WAAW;;;;qBAMF,KAAK;;;;EAOzB,YAAY,CAAC,IAAY;IACvB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAC9C;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACjD;GACF;EAcD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC9B;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;MACjD,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,IAAI,IACR,eACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,IACT,IAAI,EACR,qBAAe,OAAO,EAAE,eAAe,IACrC,eAAa,CACC,EACf,CAAC,IAAI,CAAC,SAAS,IACd,sBACE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,IAChB,IAAI,CACH,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","./src/components/modal-header/modal-header.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 2px 16px 16px 10px;\n  align-items: center;\n  align-self: stretch;\n\n  .modal-close {\n    margin-left: auto;\n    margin-right: -20px;\n  }\n\n  .modal-icon {\n    margin-right: 1rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (icon) {\n      this.parentDialog.classList.add('with-icon');\n    } else {\n      this.parentDialog.classList.remove('with-icon');\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Close icon is clicked\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = this.hostElement.closest('ix-modal');\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-modal-loading.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
 const modalLoadingCss = ":host{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem;overflow:hidden}:host .loading-text{display:block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7334ee80.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
 import { a as anime } from './anime.es-185e9087.js';
-import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-aa83c2d1.js';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-d5dd20ad.js';
 import { A as Animation } from './animation-268dce50.js';
 
-const modalCss = "::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host dialog{margin:0;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:grid;position:relative;flex-direction:column;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);max-height:80vh;overflow:hidden;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0px;left:0px;pointer-events:none}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";
+const modalCss = "::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host dialog{margin:0;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{left:0px !important;top:0px !important;transform:none !important;width:calc(100% - 28px);min-width:calc(100% - 28px);max-width:calc(100% - 28px);height:calc(100% - 28px);min-height:calc(100% - 28px);max-height:calc(100% - 28px)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0px;left:0px;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";
 
 const Modal = class {
   constructor(hostRef) {
@@ -65,7 +65,8 @@ const Modal = class {
    * Show the dialog
    */
   async showModal() {
-    this.dialog.showModal();
+    var _a;
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
   }
   /**
    * Dismiss the dialog

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

@@ -1 +1 @@
-{"file":"ix-modal.entry.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","./src/components/modal/modal.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::backdrop {\n  --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n  outline: none !important;\n}\n\n:host {\n  dialog {\n    margin: 0;\n    left: 50%;\n  }\n\n  dialog::backdrop {\n    backdrop-filter: blur(2.7182817459106445px);\n  }\n\n  .modal {\n    display: grid;\n    position: relative;\n    flex-direction: column;\n    border: none;\n    border-radius: var(--theme-default-border-radius);\n    background: var(--theme-modal--background);\n    box-shadow: var(--theme-shadow-4);\n    color: var(--theme-color-std-text);\n\n    max-height: 80vh;\n    overflow: hidden;\n    pointer-events: all;\n  }\n\n  .modal-size-360 {\n    width: 22.5rem;\n  }\n\n  .modal-size-480 {\n    width: 30rem;\n  }\n\n  .modal-size-600 {\n    width: 37.5rem;\n  }\n\n  .modal-size-720 {\n    width: 45rem;\n  }\n\n  .modal-size-840 {\n    width: 52.5rem;\n  }\n\n  .modal-size-full-width {\n    width: 95%;\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0px;\n    left: 0px;\n\n    pointer-events: none;\n  }\n}\n\n:host(.align-center) {\n  dialog {\n    margin: 0;\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.no-backdrop) {\n  dialog::backdrop {\n    background-color: transparent !important;\n    backdrop-filter: none !important;\n  }\n}\n\n:host(.with-icon) {\n  ::slotted(ix-modal-footer),\n  ::slotted(ix-modal-content) {\n    margin-left: 2.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss: EventEmitter;\n\n  get dialog() {\n    return this.hostElement.shadowRoot.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    const rect = this.dialog.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    this.dialog.showModal();\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={`modal modal-size-${this.size}`}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape' && this.keyboard === false) {\n                e.preventDefault();\n              }\n            }}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-modal.entry.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,68CAA68C;;MC+Bj9C,KAAK;;;;;IACR,mBAAc,GAAmB,EAAE,CAAC;gBAShB,KAAK;qBAKb,IAAI;oBAKL,IAAI;gCAOQ,KAAK;;oBAajB,KAAK;oBAKL,IAAI;;EAYvB,IAAI,MAAM;IACR,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;GAC5D;EAEO,YAAY;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;IAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC;IAE5C,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,MAAM;MACpB,QAAQ;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;MAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MAC5B,MAAM,EAAE,aAAa;KACtB,CAAC,CAAC;GACJ;EAEO,aAAa,CAAC,gBAA0B;IAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;IAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,EAAE,CAAC;IAE5C,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,MAAM;MACpB,QAAQ;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;MAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MAC5B,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE;QACR,IAAI,gBAAgB,EAAE;UACpB,gBAAgB,EAAE,CAAC;SACpB;OACF;KACF,CAAC,CAAC;GACJ;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;IACjD,MAAM,cAAc,GAClB,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO;MACzB,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;MACvC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO;MAC1B,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IAC1C,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAChD,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;;;;EAMD,MAAM,SAAS;;IACb,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,EAAE,CAAC;GAC1B;;;;EAMD,MAAM,YAAY,CAAU,MAAU;IACpC,IAAI,YAAY,GAAG,IAAI,CAAC;IAExB,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;MACpC,YAAY,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,YAAY,EAAE;MACjB,OAAO;KACR;IAED,IAAI,CAAC,aAAa,CAAC;MACjB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;QACE,IAAI,EAAE,SAAS;QACf,MAAM;OACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;MAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACjC,CAAC,CAAC;GACJ;;;;EAMD,MAAM,UAAU,CAAU,MAAS;IACjC,IAAI,CAAC,aAAa,CAAC;MACjB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;QACE,IAAI,EAAE,OAAO;QACb,MAAM;OACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;MAEF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC/B,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC5D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK;QACtC,cAAc,EAAE,IAAI,CAAC,QAAQ;OAC9B,IAED,WAAK,KAAK,EAAC,iBAAiB,IAC1B,4BACc,WAAW,CAAC,IAAI,CAAC,sBACX,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBACxC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvD,KAAK,EAAE,oBAAoB,IAAI,CAAC,IAAI,EAAE,EACtC,SAAS,EAAE,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;UACjD,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;OACF,EACD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAC;QACV,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,IAED,eAAa,CACN,CACL,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","./src/components/modal/modal.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::backdrop {\n  --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n  outline: none !important;\n}\n\n:host {\n  dialog {\n    margin: 0;\n    left: 50%;\n  }\n\n  dialog::backdrop {\n    backdrop-filter: blur(2.7182817459106445px);\n  }\n\n  .modal {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    border: none;\n    border-radius: var(--theme-default-border-radius);\n    background: var(--theme-modal--background);\n    box-shadow: var(--theme-shadow-4);\n    color: var(--theme-color-std-text);\n    overflow: visible;\n    max-height: 80vh;\n    pointer-events: all;\n  }\n\n  .modal-size-360 {\n    width: 22.5rem;\n  }\n\n  .modal-size-480 {\n    width: 30rem;\n  }\n\n  .modal-size-600 {\n    width: 37.5rem;\n  }\n\n  .modal-size-720 {\n    width: 45rem;\n  }\n\n  .modal-size-840 {\n    width: 52.5rem;\n  }\n\n  .modal-size-full-width {\n    width: 95%;\n  }\n\n  .modal-size-full-screen {\n    left: 0px !important;\n    top: 0px !important;\n    transform: none !important;\n\n    width: calc(100% - 28px);\n    min-width: calc(100% - 28px);\n    max-width: calc(100% - 28px);\n\n    height: calc(100% - 28px);\n    min-height: calc(100% - 28px);\n    max-height: calc(100% - 28px);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0px;\n    left: 0px;\n\n    pointer-events: none;\n  }\n\n  ::slotted(ix-modal-footer) {\n    margin-top: auto;\n  }\n}\n\n:host(.align-center) {\n  dialog {\n    margin: 0;\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.no-backdrop) {\n  dialog::backdrop {\n    background-color: transparent !important;\n    backdrop-filter: none !important;\n  }\n}\n\n:host(.with-icon) {\n  ::slotted(ix-modal-footer),\n  ::slotted(ix-modal-content) {\n    margin-left: 2.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss: EventEmitter;\n\n  get dialog() {\n    return this.hostElement.shadowRoot.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    const rect = this.dialog.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    this.dialog?.showModal();\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={`modal modal-size-${this.size}`}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape' && this.keyboard === false) {\n                e.preventDefault();\n              }\n            }}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,12 +1,29 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7334ee80.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { B as BaseButton } from './base-button-87048318.js';
+import { a as a11yBoolean } from './a11y-d5dd20ad.js';
 
-const paginationCss = ".sc-ix-pagination-h,.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination,.sc-ix-pagination-h .item-count.sc-ix-pagination{display:inline-flex;align-items:center}.sc-ix-pagination-h .basic-pagination.sc-ix-pagination{padding:0 0.125rem}.sc-ix-pagination-h .advanced-pagination.sc-ix-pagination{padding:0 0.75rem}.sc-ix-pagination-h input.sc-ix-pagination{width:4.125rem;text-align:center;margin:0 0.5rem}.sc-ix-pagination-h .page-buttons.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .total-count.sc-ix-pagination{white-space:nowrap}.sc-ix-pagination-h .item-count.sc-ix-pagination{flex-grow:1;justify-content:flex-end;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h .item-count.sc-ix-pagination ix-select.sc-ix-pagination{width:4.5rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}.sc-ix-pagination-h ix-index-button.sc-ix-pagination+ix-index-button.sc-ix-pagination{-webkit-margin-start:0.125rem;margin-inline-start:0.125rem}";
+const paginationCss = ".form-control,.form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);-webkit-padding-start:0.5rem;padding-inline-start:0.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;-webkit-margin-start:0.312rem;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{-webkit-padding-start:2.2rem;padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}.was-validated .form-control:invalid,.was-validated .is-invalid{background-color:var(--theme-input-error--background);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center !important;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}:host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 button{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 ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}:host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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,:host .advanced-pagination,:host .item-count{display:inline-flex;align-items:center}:host .basic-pagination{padding:0 0.125rem}:host .advanced-pagination{padding:0 0.75rem}:host .page-selection{width:4.125rem;text-align:center;margin:0 0.5rem}:host .page-buttons{white-space:nowrap}:host .total-count{white-space:nowrap}:host .item-count{flex-grow:1;justify-content:flex-end;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}:host .item-count ix-select{width:4.5rem;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}:host button{width:auto;min-width:2rem;height:2rem;padding:0 0.5rem}:host button+button{-webkit-margin-start:0.125rem;margin-inline-start:0.125rem}";
 
 const Pagination = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.pageSelected = createEvent(this, "pageSelected", 7);
     this.itemCountChanged = createEvent(this, "itemCountChanged", 7);
+    this.baseButtonConfig = {
+      variant: 'secondary',
+      outline: false,
+      ghost: true,
+      iconOnly: true,
+      iconOval: false,
+      disabled: false,
+      icon: '',
+      loading: false,
+      selected: false,
+      type: 'button',
+      extraClasses: {
+        ['w-auto']: true,
+      },
+    };
     this.maxCountPages = 7;
     this.advanced = undefined;
     this.itemCount = 15;
@@ -17,9 +34,6 @@ const Pagination = class {
     this.i18nOf = 'of';
     this.i18nItems = 'Items';
   }
-  get pageInput() {
-    return this.hostElement.querySelector('.advanced-pagination input.form-control');
-  }
   selectPage(index) {
     if (index < 0) {
       this.selectedPage = 0;
@@ -45,9 +59,10 @@ const Pagination = class {
     this.selectPage(this.selectedPage - 1);
   }
   getPageButton(index) {
-    return (h("ix-index-button", { variant: "primary", onClick: () => {
-        this.selectPage(index);
-      }, selected: this.selectedPage === index }, index + 1));
+    const baseButtonProps = Object.assign(Object.assign({}, this.baseButtonConfig), { onClick: () => this.selectPage(index), selected: this.selectedPage === index, ariaAttributes: {
+        'aria-pressed': a11yBoolean(this.selectedPage === index),
+      } });
+    return h(BaseButton, Object.assign({}, baseButtonProps), index + 1);
   }
   renderPageButtons() {
     const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);
@@ -59,15 +74,16 @@ const Pagination = class {
     let end = Math.min(this.count, this.maxCountPages);
     let pageCount = Math.floor((this.maxCountPages - 4) / 2);
     if (hasOverflowStart) {
-      pageButtons.push(this.getPageButton(0));
-      pageButtons.push(h("ix-index-button", { variant: "secondary", onClick: () => {
+      const baseButtonProps = Object.assign(Object.assign({}, this.baseButtonConfig), { onClick: () => {
           if (hasOverflowEnd) {
             this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));
           }
           else {
             this.selectPage(this.count - this.maxCountPages);
           }
-        } }, "..."));
+        } });
+      pageButtons.push(this.getPageButton(0));
+      pageButtons.push(h(BaseButton, Object.assign({}, baseButtonProps), "..."));
       if (hasOverflowEnd) {
         start = this.count - this.maxCountPages + 2;
       }
@@ -89,23 +105,24 @@ const Pagination = class {
       pageButtons.push(this.getPageButton(i));
     }
     if (hasOverflowEnd) {
-      pageButtons.push(h("ix-index-button", { variant: "secondary", onClick: () => {
+      const baseButtonProps = Object.assign(Object.assign({}, this.baseButtonConfig), { onClick: () => {
           if (hasOverflowStart) {
             this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));
           }
           else {
             this.selectPage(this.maxCountPages - 1);
           }
-        } }, "..."));
+        } });
+      pageButtons.push(h(BaseButton, Object.assign({}, baseButtonProps), "..."));
       pageButtons.push(this.getPageButton(this.count - 1));
     }
     return h("span", { class: "page-buttons" }, pageButtons);
   }
   render() {
-    return (h(Host, null, h("ix-icon-button", { disabled: this.selectedPage === 0, ghost: true, icon: "chevron-left-small", onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, this.i18nPage, h("input", { class: "form-control", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+    return (h(Host, null, h("ix-icon-button", { disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
         const index = Number.parseInt(e.target['value']);
         this.selectPage(index - 1);
-      } }), h("span", { class: "total-count" }, this.i18nOf, " ", this.count))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { disabled: this.selectedPage === this.count - 1, ghost: true, icon: "chevron-right-small", onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, this.i18nItems, h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", "selected-indices": this.itemCount, onItemSelectionChange: (e) => {
+      } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
         const count = Number.parseInt(e.detail[0]);
         this.itemCountChanged.emit(count);
       } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));

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

@@ -1 +1 @@
-{"file":"ix-pagination.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,m9BAAm9B;;MC2B59B,UAAU;;;;;IACJ,kBAAa,GAAG,CAAC,CAAC;;qBAaf,EAAE;yBAKE,IAAI;;wBAUY,CAAC;oBAKtB,MAAM;kBAKR,IAAI;qBAMD,OAAO;;EAY3B,IAAI,SAAS;IACX,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CACnC,yCAAyC,CAC1C,CAAC;GACH;EAEO,UAAU,CAAC,KAAa;IAC9B,IAAI,KAAK,GAAG,CAAC,EAAE;MACb,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KACvB;SAAM,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;MACjC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC3B;IAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC3C;EAEO,QAAQ;IACd,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;MACxC,OAAO;KACR;IAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;GACxC;EAEO,QAAQ;IACd,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;MAC3B,OAAO;KACR;IAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;GACxC;EAEO,aAAa,CAAC,KAAa;IACjC,QACE,uBACE,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE;QACP,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;OACxB,EACD,QAAQ,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK,IAEpC,KAAK,GAAG,CAAC,CACM,EAClB;GACH;EAEO,iBAAiB;IACvB,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IACpD,MAAM,gBAAgB,GACpB,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,mBAAmB,CAAC;IACzD,MAAM,cAAc,GAClB,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,mBAAmB,GAAG,CAAC,CAAC;IAC1E,MAAM,WAAW,GAAG,EAAE,CAAC;IAEvB,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACnD,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAEzD,IAAI,gBAAgB,EAAE;MACpB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;MACxC,WAAW,CAAC,IAAI,CACd,uBACE,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE;UACP,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,UAAU,CACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CACnD,CAAC;WACH;eAAM;YACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;WAClD;SACF,UAGe,CACnB,CAAC;MAEF,IAAI,cAAc,EAAE;QAClB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;OAC7C;WAAM;QACL,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAC5C,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;OAClB;KACF;IAED,IAAI,cAAc,EAAE;MAClB,IAAI,gBAAgB,EAAE;QACpB,KAAK,GAAG,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QACtC,GAAG,GAAG,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,CAAC,CAAC;OACzC;WAAM;QACL,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;OAC9B;KACF;IAED,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;MAChC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC;IAED,IAAI,cAAc,EAAE;MAClB,WAAW,CAAC,IAAI,CACd,uBACE,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE;UACP,IAAI,gBAAgB,EAAE;YACpB,IAAI,CAAC,UAAU,CACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CACnD,CAAC;WACH;eAAM;YACL,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;WACzC;SACF,UAGe,CACnB,CAAC;MACF,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;KACtD;IAED,OAAO,YAAM,KAAK,EAAC,cAAc,IAAE,WAAW,CAAQ,CAAC;GACxD;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,sBACE,QAAQ,EAAE,IAAI,CAAC,YAAY,KAAK,CAAC,EACjC,KAAK,QACL,IAAI,EAAC,oBAAoB,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GACd,EAEjB,IAAI,CAAC,QAAQ,IACZ,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,EACd,aACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE,IAAI,CAAC,YAAY,GAAG,CAAC,EAC5B,QAAQ,EAAE,CAAC,CAAC;QACV,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;OAC5B,GACD,EACF,YAAM,KAAK,EAAC,aAAa,IACtB,IAAI,CAAC,MAAM,OAAG,IAAI,CAAC,KAAK,CACpB,CACH,KAEN,YAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,iBAAiB,EAAE,MAAS,CAClE,EAED,sBACE,QAAQ,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,EAC9C,KAAK,QACL,IAAI,EAAC,qBAAqB,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GACd,EAEjB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAClC,YAAM,KAAK,EAAC,YAAY,IACrB,IAAI,CAAC,SAAS,EACf,iBACE,cAAc,QACd,eAAe,EAAC,EAAE,EAClB,oBAAoB,EAAC,EAAE,sBACL,IAAI,CAAC,SAAS,EAChC,qBAAqB,EAAE,CAAC,CAAC;QACvB,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;OACnC,IAED,sBAAgB,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAkB,EACvD,sBAAgB,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAkB,EACvD,sBAAgB,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAkB,EACvD,sBAAgB,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAkB,EACvD,sBAAgB,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,GAAkB,CAC/C,CACP,KAEP,EAAE,CACH,CACI,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=scoped","./src/components/pagination/pagination.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  input {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  ix-index-button + ix-index-button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  scoped: true,\n})\nexport class Pagination {\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  get pageInput() {\n    return this.hostElement.querySelector(\n      '.advanced-pagination input.form-control'\n    );\n  }\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    return (\n      <ix-index-button\n        variant=\"primary\"\n        onClick={() => {\n          this.selectPage(index);\n        }}\n        selected={this.selectedPage === index}\n      >\n        {index + 1}\n      </ix-index-button>\n    );\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(\n        <ix-index-button\n          variant=\"secondary\"\n          onClick={() => {\n            if (hasOverflowEnd) {\n              this.selectPage(\n                this.selectedPage - Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.count - this.maxCountPages);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      pageButtons.push(\n        <ix-index-button\n          variant=\"secondary\"\n          onClick={() => {\n            if (hasOverflowStart) {\n              this.selectPage(\n                this.selectedPage + Math.max(0, 2 * pageCount + 1)\n              );\n            } else {\n              this.selectPage(this.maxCountPages - 1);\n            }\n          }}\n        >\n          ...\n        </ix-index-button>\n      );\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon=\"chevron-left-small\"\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            {this.i18nPage}\n            <input\n              class=\"form-control\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              {this.i18nOf} {this.count}\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon=\"chevron-right-small\"\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            {this.i18nItems}\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              selected-indices={this.itemCount}\n              onItemSelectionChange={(e) => {\n                const count = Number.parseInt(e.detail[0]);\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-pagination.entry.js","mappings":"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","names":[],"sources":["./src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","./src/components/pagination/pagination.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/components/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  .page-selection {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  button {\n    width: auto;\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 0.5rem;\n  }\n\n  button + button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'secondary',\n    outline: false,\n    ghost: true,\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n    extraClasses: {\n      ['w-auto']: true,\n    },\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced: boolean;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    this.pageSelected.emit(this.selectedPage);\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={this.selectedPage === 0}\n          ghost\n          icon={'chevron-left-small'}\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography variant=\"default\">{this.i18nPage}</ix-typography>\n            <input\n              class=\"form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(e) => {\n                const index = Number.parseInt(e.target['value']);\n                this.selectPage(index - 1);\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography variant=\"default\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={this.selectedPage === this.count - 1}\n          ghost\n          icon={'chevron-right-small'}\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            <ix-typography variant=\"default\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(e.detail[0]);\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}