@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/siemens-ix/p-d3e0d6d9.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as a,h as t,H as i,g as o}from"./p-DtF9fwpD.js";import{a as n}from"./p-Ou74PMQs.js";import{u as r,A as s}from"./p--2LOMK-5.js";import{v as d}from"./p-CrTP-icT.js";import"./p-BdCnOrqW.js";const c=":host{display:flex;position:relative;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .map-nav{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}:host .map-nav-sidebar{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}:host .map-nav-sidebar.display-none{display:none}:host .map-nav-sidebar-content{align-items:center;position:relative;overflow:auto;height:100%;width:100%}:host .map-nav-sidebar-content .map-nav-sidebar-static-content{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}:host .map-nav-header{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}:host .map-nav-header .map-nav-header-brand{background-color:var(--theme-map-navigation-background);padding-left:1rem;padding-right:1rem;padding-bottom:0.625rem;height:100%;width:100%;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}:host .map-nav-header .map-nav-header-brand button{margin-left:1rem}:host .map-nav-header-content{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}:host .map-nav-header-content.empty{height:0}:host .map-nav-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}:host .content{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}:host ::slotted(ix-menu){position:absolute}";const l=class{constructor(t){e(this,t);this.navigationToggled=a(this,"navigationToggled",7);this.contextMenuClick=a(this,"contextMenuClick",7);this.hideContextMenu=true;this.isSidebarOpen=true;this.hasContentHeader=false}get menu(){return this.hostElement.querySelector("ix-menu")}get menuOverlay(){return this.hostElement.querySelector("ix-menu-overlay")}get mapNavMenu(){return this.hostElement.shadowRoot.querySelector(".map-nav-menu")}get sidebar(){return this.hostElement.shadowRoot.querySelector(".map-nav-sidebar")}get overlay(){return this.hostElement.shadowRoot.querySelector("#overlay")}componentDidRender(){this.appendMenu();this.closeOverlay()}componentWillLoad(){r(this.hostElement,s,{hideHeader:false,host:"map-navigation"})}appendMenu(){this.menu.addEventListener("mapExpandChange",(e=>{const a=!e.detail;this.toggleSidebar(a)}));this.menu.enableMapExpand=true}async toggleSidebar(e){if(e!==undefined){this.isSidebarOpen=e}else{this.isSidebarOpen=!this.isSidebarOpen}if(this.isSidebarOpen){this.openSidebar()}else{this.closeSidebar()}this.navigationToggled.emit(this.isSidebarOpen);this.menu.toggleMapExpand(this.isSidebarOpen)}closeSidebar(){n({targets:this.sidebar,duration:l.defaultTime,marginLeft:[0,"-29.75rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{this.sidebar.classList.add("display-none")}})}openSidebar(){n({targets:this.sidebar,duration:l.defaultTime,marginLeft:["-29.75rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{this.sidebar.classList.remove("display-none")}})}async openOverlay(e,a,t,i){n({targets:this.overlay,duration:l.slowTime,backdropFilter:[0,"blur(1rem)"],translateX:["-4rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{this.overlay.classList.remove("display-none")}});const o=document.createElement("ix-map-navigation-overlay");o.setAttribute("color",i!==null&&i!==void 0?i:"");o.setAttribute("name",e);o.setAttribute("icon",t!==null&&t!==void 0?t:"");o.setAttribute("slot","overlay");o.addEventListener("closeClick",(()=>this.closeOverlay()));o.appendChild(a);this.hostElement.appendChild(o)}async closeOverlay(){n({targets:this.overlay,duration:l.slowTime,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{var e;if(!this.overlay){return}(e=this.overlay.firstChild)===null||e===void 0?void 0:e.remove();this.overlay.classList.add("display-none")}})}checkHasContentHeader(e){const a=e.currentTarget.assignedNodes({flatten:true});this.hasContentHeader=(a===null||a===void 0?void 0:a.length)!==0}render(){return t(i,{key:"3e3241827aec837fdc348cf5d1213691f5780428"},t("slot",{key:"5bd3dae6dd41bd53eed1551c8398ca302bab573c",name:"menu"}),t("div",{key:"d6fb088fbedee4cd01cc83b8feedd5017f07060f",class:"map-nav"},t("div",{key:"0e777bcbf889c0a101f6c4e44363b4d176813d47",class:"map-nav-sidebar"},t("div",{key:"12de7debb9766ada7f0c5c26378d6cafab118cda",class:"map-nav-header"},t("ix-application-header",{key:"74c65d9fb6b7be6b522411509fa8a5a71afc2244",name:this.applicationName,class:"map-nav-header-brand"},t("slot",{key:"3513d27e844f2f5c0ae2052d64fd8f3f9cea70a7",slot:"logo",name:"logo"}))),t("div",{key:"3abae9f99b74404df5cd23f5d0b9715cbdd0b371",class:"map-nav-sidebar-content"},t("div",{key:"5f62402dc4f5c3743a3fd79d5160b9ab75b132c6",class:"map-nav-sidebar-static-content"},t("div",{key:"715c115bdf5178a311b04037005efc3230529b0c",class:"map-nav-title"},this.navigationTitle),this.hideContextMenu?"":t("ix-icon-button",{icon:d,ghost:true,size:"24",variant:"secondary",onClick:e=>this.contextMenuClick.emit()})),t("div",{key:"ea4894c17a372c76fc74680cddfd79a645391a76",class:"map-nav-sidebar-user-content"},t("slot",{key:"bb86645cbf9f71c710f12f78b68858fab7bdd38d",name:"sidebar-content"})))),t("div",{key:"fbee95f2bac6e72acf639d4e788063e8cf36d528",class:"content"},t("div",{key:"dbadf99583818d8f62866e5073caa53e09d97a74",class:{"map-nav-header-content":true,"bg-2":true,empty:!this.hasContentHeader}},t("slot",{key:"32fdf4eed811b0bc4b6f043ae98e16b05ed2e267",name:"content-header",onSlotchange:e=>this.checkHasContentHeader(e)})),t("main",{key:"ef909703d699998939dc77a96c9e2cebae80f300"},t("slot",{key:"2dc6375d4004990560852d1e0497b6fe9ad6cbc6"}),t("slot",{key:"4f6fc515a05d2ff8feceb0381ffa6d80ea46ae5a",name:"overlay"})))))}get hostElement(){return o(this)}};l.defaultTime=150;l.slowTime=500;l.style=c;export{l as ix_map_navigation};
+//# sourceMappingURL=p-d3e0d6d9.entry.js.map

package/dist/siemens-ix/p-d3e0d6d9.entry.js.map

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

package/dist/siemens-ix/p-d6bf2d75.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,H as o,g as i}from"./p-DtF9fwpD.js";import{f as a,C as s}from"./p-CrTP-icT.js";const c='@charset "UTF-8";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}';const l=class{constructor(r){t(this,r);this.tabClick=e(this,"tabClick",7);this.selected=false;this.disabled=false;this.small=false;this.icon=false;this.rounded=false;this.layout="auto";this.placement="bottom"}tabItemClasses(t){return{selected:t.selected,disabled:t.disabled,"small-tab":t.small,icon:t.small,stretched:t.layout==="stretched",bottom:t.placement==="bottom",top:t.placement==="top",circle:t.circle}}render(){return r(o,{key:"cbdfbecd0c8d59f2929fc30e19c771dc17477e9f",class:this.tabItemClasses({selected:this.selected,disabled:this.disabled,small:this.small,icon:this.icon,layout:this.layout,placement:this.placement,circle:this.rounded}),tabIndex:0,onClick:t=>{if(t.defaultPrevented)return;const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"a791bae7e669185abc5d17f590337e06969ac91b",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"4f107c1be1047b45603026cb3bb5dd9fa44ec816"})),r("div",{key:"b0c60b8a83dbff18299be163d950f335e4806285",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};l.style=c;const n=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const h=":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";const d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);this.small=false;this.rounded=false;this.selected=0;this.layout="auto";this.placement="bottom";this.totalItems=0;this.currentScrollAmount=0;this.scrollAmount=100;this.scrollActionAmount=0;this.showArrowPrevious=false;this.showArrowNext=false;this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true}}onWindowResize(){this.totalItems=0;this.totalItems=this.getTabs().length;if(this.windowStartSize===0)return this.windowStartSize=window.innerWidth;this.move(this.windowStartSize-window.innerWidth);this.windowStartSize=window.innerWidth}getTabs(){return Array.from(this.hostElement.querySelectorAll("ix-tab-item"))}getTab(t){return this.getTabs()[t]}getTabsWrapper(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector(".items-content")}initResizeObserver(){const t=this.hostElement.parentElement;if(!t)return;this.resizeObserver=new ResizeObserver((()=>{this.renderArrows()}));this.resizeObserver.observe(t)}showArrows(){try{const t=this.getTabsWrapper();return t&&t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()===true&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();if(!t){return false}const e=t.getBoundingClientRect();return this.showArrows()===true&&this.scrollActionAmount>(t.scrollWidth-e.width)*-1}catch(t){return false}}move(t,e=false){const r=this.getTabsWrapper();if(!r){return}const o=r.getBoundingClientRect().width;const i=-this.currentScrollAmount+o-r.scrollWidth;t=t<i?i:t;t+=this.currentScrollAmount;t=Math.min(t,0);const a=[`transform: translateX(${t}px);`,e?"transition: all ease-in-out 400ms;":""].join("");r.setAttribute("style",a);if(e)this.currentScrollAmount=this.scrollActionAmount=t;else this.scrollActionAmount=t}onSelectedChange(t){var e;if(!this.showArrows())return;const r=this.getTab(t).getBoundingClientRect();const o=(e=this.getTabsWrapper())===null||e===void 0?void 0:e.clientWidth;const i=32;if(r.left<i){this.move(-r.left+i,true)}else if(o&&r.right>o-i){this.move(o-r.right-i,true)}}setSelected(t){this.selected=t}clickTab(t){if(!this.clickAction.isClick||this.dragStop()){return}const{defaultPrevented:e}=this.selectedChange.emit(t);if(e){return}this.setSelected(t)}dragStart(t,e){if(!this.showArrows())return;if(e.button>0)return;this.clickAction.timeout=this.clickAction.timeout===null?setTimeout((()=>this.clickAction.isClick=false),300):null;const r=parseFloat(window.getComputedStyle(t).left);const o=e.clientX;const i=t=>this.dragMove(t,r,o);const a=()=>{window.removeEventListener("mousemove",i,false);window.removeEventListener("click",a,false);this.dragStop()};window.addEventListener("click",a);window.addEventListener("mousemove",i,false)}dragMove(t,e,r){this.move(t.clientX+e-r)}dragStop(){if(this.clickAction.timeout){clearTimeout(this.clickAction.timeout);this.clickAction.timeout=null}if(this.clickAction.isClick)return false;this.currentScrollAmount=this.scrollActionAmount;this.clickAction.isClick=true;return true}componentWillLoad(){const t=this.getTabs();t.map(((t,e)=>{if(this.small)t.setAttribute("small","true");if(this.rounded)t.setAttribute("rounded","true");t.setAttribute("layout",this.layout);t.setAttribute("selected",e===this.selected?"true":"false");t.setAttribute("placement",this.placement)}));this.initResizeObserver()}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.map(((t,e)=>{t.setAttribute("selected",e===this.selected?"true":"false")}))}componentWillRender(){this.renderArrows()}renderArrows(){n((()=>{this.showArrowNext=this.showNextArrow();this.showArrowPrevious=this.showPreviousArrow()}))}componentDidLoad(){const t=this.getTabs();t.forEach((t=>{t.addEventListener("mousedown",(e=>this.dragStart(t,e)))}))}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}onTabClick(t){if(t.defaultPrevented){return}const e=t.target;const r=this.getTabs();r.forEach(((t,r)=>{if(!t.disabled&&t===e){this.clickTab(r)}}))}render(){return r(o,{key:"d732d69d0c9fe6b8000b683821625cf0e0024974"},this.showArrowPrevious&&r("div",{key:"500a5a3d76313289e652fd8bdad50f56bde3d91f",class:"arrow",onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"6acadf35ee826b0814e1152b70f95ee81e6c23c8",name:s})),r("div",{key:"58288db2899bd9fc95ae0e97c70bc789e718a591",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showArrowPrevious,"shadow-right":this.showArrowNext,"shadow-both":this.showArrowNext&&this.showArrowPrevious}},r("div",{key:"08c98c34c63db36d8927c1edbe12083690faf86c",class:"items-content"},r("slot",{key:"e15792a7cd6b6b2679fa46e7e3c1fb37eafdfec6"}))),this.showArrowNext&&r("div",{key:"1c389a54121cc7453a18c7966ba3df6af51dd2da",class:"arrow right",onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"9c604bfb38f9e31f3826ceb27d7ad4682e70c9b6",name:a})))}get hostElement(){return i(this)}static get watchers(){return{selected:["onSelectedChange"]}}};d.style=h;export{l as ix_tab_item,d as ix_tabs};
+//# sourceMappingURL=p-d6bf2d75.entry.js.map

package/dist/siemens-ix/p-d6bf2d75.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabItemCss","TabItem","constructor","hostRef","this","selected","disabled","small","icon","rounded","layout","placement","tabItemClasses","props","stretched","bottom","top","circle","render","h","Host","key","class","tabIndex","onClick","event","defaultPrevented","clientEvent","tabClick","emit","nativeEvent","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","Tabs","totalItems","currentScrollAmount","scrollAmount","scrollActionAmount","showArrowPrevious","showArrowNext","windowStartSize","window","innerWidth","clickAction","timeout","isClick","onWindowResize","getTabs","length","move","Array","from","hostElement","querySelectorAll","getTab","getTabsWrapper","_a","shadowRoot","querySelector","initResizeObserver","parentElement","resizeObserver","ResizeObserver","renderArrows","observe","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","error","showPreviousArrow","showNextArrow","tabWrapperRect","amount","click","tabsWrapper","tabsWrapperVisibleWidth","maxScrollWidth","min","styles","join","setAttribute","onSelectedChange","newValue","tabRect","wrapperWidth","clientWidth","arrowWidth","left","right","setSelected","index","clickTab","dragStop","selectedChange","dragStart","element","button","tabPositionX","parseFloat","getComputedStyle","mousedownPositionX","clientX","dragMove","windowClick","removeEventListener","addEventListener","tabX","mousedownX","clearTimeout","componentWillLoad","tabs","map","componentDidRender","componentWillRender","componentDidLoad","forEach","disconnectedCallback","disconnect","onTabClick","target","tab","name","iconChevronLeftSmall","iconChevronRightSmall"],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.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/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px $large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-pill-outline--background);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: $tiny-space;\n    padding-right: $tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  &::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  &::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: $default-space $tiny-space;\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter?: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * Emitted when the tab is clicked.\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          if (event.defaultPrevented) return;\n\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Prevents angular from change detection when requesting an animation frame\n *\n * Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n */\nexport const requestAnimationFrameNoNgZone = (\n  callback: (...args: any[]) => void\n) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange!: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n  @State() scrollActionAmount = 0;\n  @State() showArrowPrevious = false;\n  @State() showArrowNext = false;\n\n  private windowStartSize = window.innerWidth;\n  private resizeObserver?: ResizeObserver;\n\n  private clickAction: {\n    timeout: NodeJS.Timeout | null;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot?.querySelector('.items-content');\n  }\n\n  private initResizeObserver() {\n    const parentElement = this.hostElement.parentElement;\n    if (!parentElement) return;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.renderArrows();\n    });\n    this.resizeObserver.observe(parentElement);\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper &&\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() === true && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n\n      if (!tabWrapper) {\n        return false;\n      }\n\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() === true &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private move(amount: number, click = false) {\n    const tabsWrapper = this.getTabsWrapper();\n\n    if (!tabsWrapper) {\n      return;\n    }\n\n    const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n    const maxScrollWidth =\n      -this.currentScrollAmount +\n      tabsWrapperVisibleWidth -\n      tabsWrapper.scrollWidth;\n\n    amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n    amount += this.currentScrollAmount;\n    amount = Math.min(amount, 0);\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabsWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  @Watch('selected')\n  onSelectedChange(newValue: number) {\n    if (!this.showArrows()) return;\n\n    const tabRect = this.getTab(newValue).getBoundingClientRect();\n    const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n    const arrowWidth = 32;\n\n    if (tabRect.left < arrowWidth) {\n      this.move(-tabRect.left + arrowWidth, true);\n    } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n      this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n    }\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (!this.clickAction.isClick || this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n    const windowClick = () => {\n      window.removeEventListener('mousemove', move, false);\n      window.removeEventListener('click', windowClick, false);\n      this.dragStop();\n    };\n    window.addEventListener('click', windowClick);\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    if (this.clickAction.timeout) {\n      clearTimeout(this.clickAction.timeout);\n      this.clickAction.timeout = null;\n    }\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n\n    this.initResizeObserver();\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    this.renderArrows();\n  }\n\n  private renderArrows() {\n    requestAnimationFrameNoNgZone(() => {\n      this.showArrowNext = this.showNextArrow();\n      this.showArrowPrevious = this.showPreviousArrow();\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.showArrowPrevious && (\n          <div class=\"arrow\" onClick={() => this.move(this.scrollAmount, true)}>\n            <ix-icon name={iconChevronLeftSmall}></ix-icon>\n          </div>\n        )}\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showArrowPrevious,\n            'shadow-right': this.showArrowNext,\n            'shadow-both': this.showArrowNext && this.showArrowPrevious,\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        {this.showArrowNext && (\n          <div\n            class=\"arrow right\"\n            onClick={() => this.move(-this.scrollAmount, true)}\n          >\n            <ix-icon name={iconChevronRightSmall}></ix-icon>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-e59e6e87.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as o,H as i,g as e}from"./p-DtF9fwpD.js";import{v as s}from"./p-CrTP-icT.js";const b=".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";const h=class{constructor(o){t(this,o);this.buttonClick=r(this,"buttonClick",7);this.variant="primary";this.closeBehavior="both";this.outline=false;this.ghost=false;this.disabled=false;this.placement="bottom-start";this.toggle=false}linkTriggerRef(){if(this.triggerElement&&this.dropdownElement){this.dropdownElement.trigger=this.triggerElement}}componentDidLoad(){this.linkTriggerRef()}render(){var t;const r={variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,class:{"left-button-border":!this.outline}};return o(i,{key:"1b0a92f3685c7c40fb424b0b3512da6b29c0f75b"},o("div",{key:"ca8500f317af653798261979ede3d0d191c9e444",class:{"btn-group":true,"middle-gap":!this.outline}},this.label?o("ix-button",Object.assign({},r,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)}),this.label):o("ix-icon-button",Object.assign({},r,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)})),o("ix-icon-button",Object.assign({key:"668ef50e336004a1577054bd46e2d0452dc68216"},r,{ref:t=>this.triggerElement=t,class:"anchor",icon:(t=this.splitIcon)!==null&&t!==void 0?t:s}))),o("ix-dropdown",{key:"083b54165e696c238462a4a93e9f1e45a92a0ea5",ref:t=>this.dropdownElement=t,closeBehavior:this.closeBehavior},o("slot",{key:"463a488847ded8a0757015e73a93979b082533f2"})))}get hostElement(){return e(this)}};h.style=b;export{h as ix_split_button};
+//# sourceMappingURL=p-e59e6e87.entry.js.map

package/dist/siemens-ix/p-e59e6e87.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["splitButtonCss","SplitButton","constructor","hostRef","this","variant","closeBehavior","outline","ghost","disabled","placement","toggle","linkTriggerRef","triggerElement","dropdownElement","trigger","componentDidLoad","render","buttonAttributes","class","h","Host","key","label","Object","assign","icon","onClick","e","buttonClick","emit","ref","r","_a","splitIcon","iconContextMenu"],"sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.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@import 'legacy/components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\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  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * @since 2.3.0\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n  private triggerElement?: HTMLElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon ?? iconContextMenu}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown\n          ref={(r) => (this.dropdownElement = r)}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAiB,i7C,MC+BVC,EAAW,MALxB,WAAAC,CAAAC,G,mDAWUC,KAAOC,QAAuB,UAM9BD,KAAaE,cAAkB,OAK/BF,KAAOG,QAAG,MAKVH,KAAKI,MAAG,MAoBRJ,KAAQK,SAAG,MAKXL,KAASM,UAAqB,eAE7BN,KAAMO,OAAG,KAiEnB,CAvDS,cAAAC,GACN,GAAIR,KAAKS,gBAAkBT,KAAKU,gBAAiB,CAC/CV,KAAKU,gBAAgBC,QAAUX,KAAKS,c,EAIxC,gBAAAG,GACEZ,KAAKQ,gB,CAGP,MAAAK,G,MACE,MAAMC,EAAmB,CACvBb,QAASD,KAAKC,QACdE,QAASH,KAAKG,QACdC,MAAOJ,KAAKI,MACZC,SAAUL,KAAKK,SACfU,MAAO,CACL,sBAAuBf,KAAKG,UAGhC,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKH,MAAO,CAAE,YAAa,KAAM,cAAef,KAAKG,UAClDH,KAAKmB,MACJH,EACM,YAAAI,OAAAC,OAAA,GAAAP,EACJ,CAAAQ,KAAMtB,KAAKsB,KACXC,QAAUC,GAAMxB,KAAKyB,YAAYC,KAAKF,KAErCxB,KAAKmB,OAGRH,EACM,iBAAAI,OAAAC,OAAA,GAAAP,EACJ,CAAAQ,KAAMtB,KAAKsB,KACXC,QAAUC,GAAMxB,KAAKyB,YAAYC,KAAKF,MAG1CR,EAAA,iBAAAI,OAAAC,OAAA,CAAAH,IAAA,4CACMJ,EAAgB,CACpBa,IAAMC,GAAO5B,KAAKS,eAAiBmB,EACnCb,MAAO,SACPO,MAAMO,EAAA7B,KAAK8B,aAAa,MAAAD,SAAA,EAAAA,EAAAE,MAI5Bf,EAAA,eAAAE,IAAA,2CACES,IAAMC,GAAO5B,KAAKU,gBAAkBkB,EACpC1B,cAAeF,KAAKE,eAEpBc,EAAa,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/siemens-ix/p-e5ab9886.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as a}from"./p-DtF9fwpD.js";const l=":host(.keyValue){display:flex;flex-direction:row;align-items:center;gap:1rem}:host(.keyValue) .keyValue__icon{padding:0.25rem 0}:host(.keyValue) .keyValue__content{display:flex;flex-grow:1;align-items:flex-start}:host(.keyValue) .keyValue__content,:host(.keyValue) .keyValue__content .content__label,:host(.keyValue) .keyValue__content .content__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}:host(.keyValue) .keyValue__content .content__label{color:var(--theme-color-soft-text)}:host(.keyValue) .keyValue__content .content__value{width:100%}:host(.keyValue.keyValue--column){padding:0.5rem 0;border-bottom:1px solid var(--theme-color-soft-bdr)}:host(.keyValue.keyValue--column) .keyValue__content{flex-direction:column}:host(.keyValue.keyValue--column) .keyValue__content .content__label,:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue){padding:2px 0}:host(.keyValue.keyValue--row){padding:0.25rem 0}:host(.keyValue.keyValue--row) .keyValue__content{flex-direction:row;gap:1rem;align-items:center}:host(.keyValue.keyValue--row) .keyValue__content .content__label,:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue){padding:6px 0}:host(.keyValue.keyValue--row) .keyValue__content .content__label{min-width:8rem}";const o=class{constructor(t){e(this,t);this.labelPosition="top"}render(){return t(a,{key:"56d07ea92ae483d5e01bd69b4062657df1e24dd6",class:`keyValue keyValue--${this.labelPosition==="top"?"column":"row"}`},this.icon&&t("ix-icon",{key:"1efbf65a72598d94983da8351dc30ec31098e5c5",name:this.icon,size:"24",class:"keyValue__icon"}),t("div",{key:"ad6c0511942410bceb233563c2abd44af22d53a2",class:"keyValue__content"},t("div",{key:"4a53d43ee6748c872ba908744b909af87fa9a618",class:"content__label"},this.label),t("div",{key:"6a92c9afbabc7cf22574d0302e2310a7178f2562",class:{content__value:true,"has-customValue":this.value===undefined}},this.value!==undefined?this.value:t("slot",{name:"custom-value"}))))}};o.style=l;export{o as ix_key_value};
+//# sourceMappingURL=p-e5ab9886.entry.js.map

package/dist/siemens-ix/p-e5ab9886.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["keyValueCss","KeyValue","constructor","hostRef","this","labelPosition","render","h","Host","key","class","icon","name","size","label","content__value","value","undefined"],"sources":["src/components/key-value/key-value.scss?tag=ix-key-value&encapsulation=shadow","src/components/key-value/key-value.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host(.keyValue) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: $default-space;\n\n  .keyValue__icon {\n    padding: $tiny-space 0;\n  }\n\n  .keyValue__content {\n    display: flex;\n    flex-grow: 1;\n    align-items: flex-start;\n\n    &,\n    .content__label,\n    .content__value {\n      @include ellipsis;\n      max-width: 100%;\n    }\n\n    .content__label {\n      color: var(--theme-color-soft-text);\n    }\n\n    .content__value {\n      width: 100%;\n    }\n  }\n}\n\n:host(.keyValue.keyValue--column) {\n  padding: $small-space 0;\n  border-bottom: 1px solid var(--theme-color-soft-bdr);\n\n  .keyValue__content {\n    flex-direction: column;\n\n    .content__label,\n    .content__value:not(.has-customValue) {\n      padding: 2px 0;\n    }\n  }\n}\n\n:host(.keyValue.keyValue--row) {\n  padding: $tiny-space 0;\n\n  .keyValue__content {\n    flex-direction: row;\n    gap: $default-space;\n    align-items: center;\n\n    .content__label,\n    .content__value:not(.has-customValue) {\n      padding: 6px 0;\n    }\n\n    .content__label {\n      min-width: 8rem;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' | 'left';\n\n/**\n * @slot custom-value - Optional custom value at key value instead of text value\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value',\n  styleUrl: 'key-value.scss',\n  shadow: true,\n})\nexport class KeyValue {\n  /**\n   * Optional key value icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Key value label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Optional key value label position - 'top' or 'left'\n   */\n  @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n  /**\n   * Optional key value text value\n   */\n  @Prop() value?: string;\n\n  render() {\n    return (\n      <Host\n        class={`keyValue keyValue--${\n          this.labelPosition === 'top' ? 'column' : 'row'\n        }`}\n      >\n        {this.icon && (\n          <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n        )}\n        <div class=\"keyValue__content\">\n          <div class=\"content__label\">{this.label}</div>\n          <div\n            class={{\n              content__value: true,\n              'has-customValue': this.value === undefined,\n            }}\n          >\n            {this.value !== undefined ? (\n              this.value\n            ) : (\n              <slot name=\"custom-value\"></slot>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,6yC,MCuBPC,EAAQ,MALrB,WAAAC,CAAAC,G,UAmBUC,KAAaC,cAA0B,KAmChD,CA5BC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,sBACLN,KAAKC,gBAAkB,MAAQ,SAAW,SAG3CD,KAAKO,MACJJ,EAAS,WAAAE,IAAA,2CAAAG,KAAMR,KAAKO,KAAME,KAAK,KAAKH,MAAM,mBAE5CH,EAAK,OAAAE,IAAA,2CAAAC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAkBN,KAAKU,OAClCP,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLK,eAAgB,KAChB,kBAAmBX,KAAKY,QAAUC,YAGnCb,KAAKY,QAAUC,UACdb,KAAU,MAEVG,EAAM,QAAAK,KAAK,mB","ignoreList":[]}

package/dist/siemens-ix/p-e8252fd7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as e,g as s}from"./p-DtF9fwpD.js";import{H as n}from"./p-Cdt22lfd.js";const a=":host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}";var f=undefined&&undefined.__decorate||function(t,i,e,s){var n=arguments.length,a=n<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,e):s,f;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(t,i,e,s);else for(var d=t.length-1;d>=0;d--)if(f=t[d])a=(n<3?f(a):n>3?f(i,e,a):f(i,e))||a;return n>3&&a&&Object.defineProperty(i,e,a),a};const d=class{constructor(i){t(this,i);this.required=false;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false}updateValidationState({isInvalid:t,isValid:i,isInfo:e,isWarning:s}){this.isInvalid=t;this.isValid=i;this.isInfo=e;this.isWarning=s}render(){return i(e,{key:"bb181d52fe217d477896a57dec475edcc6b6e5df"},i("ix-field-wrapper",{key:"3a164633b9955fbd86efefdaa9926b61dc45d39f",label:this.label,helperText:this.helperText,infoText:this.infoText,warningText:this.warningText,invalidText:this.invalidText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,required:this.required},i("slot",{key:"d9b814b0f59dbc837443826bb5513172aba0b0a3"})))}get hostElement(){return s(this)}};f([n({includeChildren:true})],d.prototype,"updateValidationState",null);d.style=a;export{d as ix_custom_field};
+//# sourceMappingURL=p-e8252fd7.entry.js.map

package/dist/siemens-ix/p-e8252fd7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["customFieldCss","CustomField","constructor","hostRef","this","required","isInvalid","isValid","isInfo","isWarning","updateValidationState","render","h","Host","key","label","helperText","infoText","warningText","invalidText","validText","showTextAsTooltip","__decorate","HookValidationLifecycle","includeChildren","prototype"],"sources":["src/components/custom-field/custom-field.scss?tag=ix-custom-field&encapsulation=shadow","src/components/custom-field/custom-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  width: fit-content;\n  height: fit-content;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  FieldWrapperInterface,\n  HookValidationLifecycle,\n  IxFormValidationState,\n  ValidationResults,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\n\n/**\n * @since 2.6.0\n */\n@Component({\n  tag: 'ix-custom-field',\n  styleUrl: 'custom-field.scss',\n  shadow: true,\n})\nexport class CustomField\n  implements FieldWrapperInterface, IxFormValidationState, IxComponent\n{\n  @Element() hostElement!: HTMLIxCustomFieldElement;\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Show text below the field component which show additional information\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  updateValidationState({\n    isInvalid,\n    isValid,\n    isInfo,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isValid = isValid;\n    this.isInfo = isInfo;\n    this.isWarning = isWarning;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          invalidText={this.invalidText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          required={this.required}\n        >\n          <slot></slot>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,2G,iXC0BVC,EAAW,MALxB,WAAAC,CAAAC,G,UAYUC,KAAQC,SAAY,MAqCnBD,KAASE,UAAG,MACZF,KAAOG,QAAG,MACVH,KAAMI,OAAG,MACTJ,KAASK,UAAG,KAuCtB,CAlCC,qBAAAC,EAAsBJ,UACpBA,EAASC,QACTA,EAAOC,OACPA,EAAMC,UACNA,IAEAL,KAAKE,UAAYA,EACjBF,KAAKG,QAAUA,EACfH,KAAKI,OAASA,EACdJ,KAAKK,UAAYA,C,CAGnB,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,MAAOX,KAAKW,MACZC,WAAYZ,KAAKY,WACjBC,SAAUb,KAAKa,SACfC,YAAad,KAAKc,YAClBC,YAAaf,KAAKe,YAClBC,UAAWhB,KAAKgB,UAChBC,kBAAmBjB,KAAKiB,kBACxBf,UAAWF,KAAKE,UAChBC,QAASH,KAAKG,QACdC,OAAQJ,KAAKI,OACbC,UAAWL,KAAKK,UAChBJ,SAAUD,KAAKC,UAEfO,EAAa,QAAAE,IAAA,8C,oCA7BrBQ,EAAA,CAHCC,EAAwB,CACvBC,gBAAiB,QAYlBvB,EAAAwB,UAAA,8B","ignoreList":[]}

package/dist/siemens-ix/p-eba65395.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,H as t}from"./p-DtF9fwpD.js";const e=":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const a=class{constructor(o){r(this,o)}render(){return o(t,{key:"a34330869a1e53c3a2df09143066197b72b1abf8"},o("ix-typography",{key:"95d1226055d927243c0b9fd2e81c3850071ca93e",class:"category-text",format:"h5"},this.label))}};a.style=e;export{a as ix_dropdown_header};
+//# sourceMappingURL=p-eba65395.entry.js.map

package/dist/siemens-ix/p-eba65395.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownHeaderCss","DropdownHeader","render","h","Host","key","class","format","this","label"],"sources":["src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","src/components/dropdown-header/dropdown-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\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n\n  padding: 0.25rem 1rem;\n\n  overflow: hidden;\n  cursor: default;\n\n  color: var(--theme-color-soft-text);\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, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label?: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAoB,m6B,MCmBbC,EAAc,M,yBAMzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,iBAAAE,IAAA,2CAAeC,MAAO,gBAAiBC,OAAQ,MAC5CC,KAAKC,O","ignoreList":[]}

package/dist/siemens-ix/p-ec92f199.entry.js

@@ -0,0 +1,2 @@
+import{r as e,f as t,h as r,H as i,c as o,F as a,g as s}from"./p-DtF9fwpD.js";import{m as d}from"./p-D6vSVaHq.js";import{D as c,I as n}from"./p-bDicGJUN.js";import{O as l}from"./p-DQmgxFuB.js";import{m as h}from"./p-bcj7UEIC.js";import{f as b,C as u,O as m}from"./p-CrTP-icT.js";const f=":host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const g=class{constructor(t){e(this,t)}onResize(){t(this)}getSize(e){if(e===""){return this.size}if(e==="sm"){return this.sizeSm}if(e==="md"){return this.sizeMd}if(e==="lg"){return this.sizeLg}}getColumnSize(){let e;g.Breakpoints.forEach((t=>{const r=t!==""?d(t):true;if(!r){return}const i=this.getSize(t);if(i){e=i}}));return e}getColumnSizeStyling(){const e=this.getColumnSize();if(!e){return}if(e==="auto"){return{flex:"0 0 auto",width:"auto","max-width":"auto"}}const t=`calc(calc(${e} / var(--ix-layout-grid-columns)) * 100%)`;return{flex:`0 0 ${t}`,width:`${t}`,"max-width":`${t}`}}render(){return r(i,{key:"1486b26e26c4adaf280571418448803fe5aa3bcd",style:Object.assign({},this.getColumnSizeStyling())},r("slot",{key:"8ba70d9d630747b60ac0a38f5974db27f46777fc"}))}};g.Breakpoints=["","sm","md","lg"];g.style=f;const k=":host{display:block;position:relative;width:21rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .fontSize{font-size:16px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid--show-week-numbers{grid-template-columns:24px repeat(7, 40px)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item:first-child{width:24px}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset);background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}:host .grid .calendar-item.week-day .overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial;width:1.5rem}:host .button{display:flex;justify-content:flex-end;margin-top:1rem}:host .hidden{display:none}";var p=undefined&&undefined.__decorate||function(e,t,r,i){var o=arguments.length,a=o<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,r,i);else for(var d=e.length-1;d>=0;d--)if(s=e[d])a=(o<3?s(a):o>3?s(t,r,a):s(t,r))||a;return o>3&&a&&Object.defineProperty(t,r,a),a};const v=class{constructor(t){e(this,t);this.dateChange=o(this,"dateChange",7);this.dateRangeChange=o(this,"dateRangeChange",7);this.dateSelect=o(this,"dateSelect",7);this.format="yyyy/LL/dd";this.range=true;this.corners="rounded";this.minDate="";this.maxDate="";this.i18nDone="Done";this.weekStartIndex=0;this.showWeekNumbers=false;this.standaloneAppearance=true;this.today=c.now().toISO();this.selectedYear=0;this.tempYear=0;this.startYear=0;this.endYear=0;this.selectedMonth=0;this.tempMonth=0;this.dropdownButtonRef=h();this.yearContainerRef=h();this.firstMonthRef=h();this.focusedDay=1;this.isDayFocus=false;this.monthChangedFromFocus=false;this.DAYS_IN_WEEK=7;this.calendar=[]}watchFromPropHandler(e){var t;this.currFromDate=e?c.fromFormat(e,this.format):undefined;if((t=this.currFromDate)===null||t===void 0?void 0:t.isValid){this.selectedYear=this.currFromDate.year;this.selectedMonth=this.currFromDate.month-1}}watchToPropHandler(e){var t;this.currToDate=e?c.fromFormat(e,this.format):undefined;if((t=this.currToDate)===null||t===void 0?void 0:t.isValid){this.selectedYear=this.currToDate.year;this.selectedMonth=this.currToDate.month-1}}onLocaleChange(){this.setTranslations()}async getCurrentDate(){var e,t,r,i;const o=((e=this.currFromDate)===null||e===void 0?void 0:e.isValid)?(t=this.currFromDate)===null||t===void 0?void 0:t.toFormat(this.format):undefined;const a=((r=this.currToDate)===null||r===void 0?void 0:r.isValid)?(i=this.currToDate)===null||i===void 0?void 0:i.toFormat(this.format):undefined;if(this.range){return{from:o,to:a}}return{from:o,to:undefined}}handleKeyUp(e){if(!this.isDayFocus){return}let t=this.focusedDay;switch(e.key){case"ArrowLeft":t--;break;case"ArrowRight":t++;break;case"ArrowUp":t=t-7;break;case"ArrowDown":t=t+7;break;default:return}if(t>this.getDaysInCurrentMonth()){t=t-this.getDaysInCurrentMonth();this.changeToAdjacentMonth(1);this.monthChangedFromFocus=true}else if(t<1){this.changeToAdjacentMonth(-1);t=t+this.getDaysInCurrentMonth();this.monthChangedFromFocus=true}this.focusedDay=t}getDaysInCurrentMonth(){return c.utc(this.selectedYear,this.selectedMonth+1).daysInMonth||0}getDateTimeNow(){return c.fromISO(this.today)}onDayBlur(){this.isDayFocus=false}onDayFocus(){this.isDayFocus=true}componentWillLoad(){var e,t,r,i;this.setTranslations();this.currFromDate=this.from?c.fromFormat(this.from,this.format):undefined;this.currToDate=this.to?c.fromFormat(this.to,this.format):undefined;const o=(t=(e=this.currFromDate)===null||e===void 0?void 0:e.year)!==null&&t!==void 0?t:this.getDateTimeNow().year;this.startYear=o-5;this.endYear=o+5;this.selectedMonth=((i=(r=this.currFromDate)===null||r===void 0?void 0:r.month)!==null&&i!==void 0?i:this.getDateTimeNow().month)-1;this.selectedYear=o;this.tempMonth=this.selectedMonth;this.tempYear=this.selectedYear}componentWillRender(){this.calculateCalendar()}componentDidRender(){if(!this.monthChangedFromFocus&&!this.isDayFocus){return}const e=this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);e.focus()}setTranslations(){this.dayNames=this.rotateWeekDayNames(n.weekdays("long",{locale:this.locale}),this.weekStartIndex);this.monthNames=n.months("long",{locale:this.locale})}rotateWeekDayNames(e,t){const r=[...e];if(t===0){return r}t=-t;const i=e.length;r.push(...r.splice(0,(-t%i+i)%i));return r}async onDone(){const e=await this.getCurrentDate();this.dateSelect.emit(e)}calculateCalendar(){const e=[];const t=c.utc(this.selectedYear,this.selectedMonth+1);const r=t.startOf("month");const i=t.endOf("month");let o=r.weekNumber;let a=i.weekNumber;let s=r.weekday-1;let d=i.weekday-1;if(this.weekStartIndex!==0){const e=n.weekdays();const t=e[r.weekday];s=this.dayNames.findIndex((e=>e===t));const o=e[i.weekday];d=this.dayNames.findIndex((e=>e===o))}let l=false;if(a===1){a=i.weeksInWeekYear+1;l=true}let h=false;if(o===r.weeksInWeekYear){o=1;a++;h=true}let b=1;for(let t=o;t<=a&&b<=31;t++){const c=[];for(let e=0;e<this.DAYS_IN_WEEK&&b<=31;e++){if(t===o&&e<s||t===a&&e>d){c.push(undefined)}else{c.push(b++)}}if(h||l){if(t===1){e.push({weekNumber:r.weeksInWeekYear,dayNumbers:c})}else if(t===i.weekNumber){e.push({weekNumber:1,dayNumbers:c})}else{e.push({weekNumber:t-1,dayNumbers:c})}continue}e.push({weekNumber:t,dayNumbers:c})}this.calendar=e}selectTempYear(e,t){e===null||e===void 0?void 0:e.stopPropagation();this.tempYear=t}focusMonth(){var e;(e=this.firstMonthRef.current)===null||e===void 0?void 0:e.focus()}infiniteScrollYears(){const e=this.yearContainerRef.current;if(!e){return}const t=e.scrollTop;const r=e.scrollHeight;const i=t===0;const o=Math.round(t+e.offsetHeight)>=r;const a=200;if(this.endYear-this.startYear>a)return;if(i){const t=e.firstElementChild;this.startYear-=5;e.scrollTo(0,t.offsetTop);return}if(o){const t=e.lastElementChild;this.endYear+=5;e.scrollTo(0,t.offsetTop)}}selectMonth(e){this.selectedMonth=e;this.selectedYear=this.tempYear;this.tempMonth=e;const t=this.hostElement.shadowRoot.querySelector("ix-dropdown");if(t){t.show=false}}changeToAdjacentMonth(e){if(this.selectedMonth+e<0){this.selectedYear--;this.selectedMonth=11}else if(this.selectedMonth+e>11){this.selectedYear++;this.selectedMonth=0}else{this.selectedMonth+=e}}selectDay(e,t){if(t.classList.contains("disabled")){return}const r=c.fromJSDate(new Date(this.selectedYear,this.selectedMonth,e));if(!this.range||this.currFromDate===undefined){this.currFromDate=r;this.onDateChange();return}if(this.currToDate!==undefined){this.currFromDate=r;this.currToDate=undefined;this.onDateChange();return}if(r<this.currFromDate){this.currToDate=this.currFromDate;this.currFromDate=r;this.onDateChange();return}this.currToDate=r;this.onDateChange()}onDateChange(){this.getCurrentDate().then((e=>{this.dateChange.emit(e);if(this.range){this.dateRangeChange.emit(e)}}))}getDayClasses(e){var t,r,i;const o=this.getDateTimeNow();const a=c.fromJSDate(new Date(this.selectedYear,this.selectedMonth,e));return{"calendar-item":true,"empty-day":e===undefined,today:o.hasSame(a,"day"),selected:((t=this.currFromDate)===null||t===void 0?void 0:t.hasSame(a,"day"))||((r=this.currToDate)===null||r===void 0?void 0:r.hasSame(a,"day")),range:this.currFromDate&&a.startOf("day")>this.currFromDate.startOf("day")&&this.currToDate!==undefined&&a.startOf("day")<((i=this.currToDate)===null||i===void 0?void 0:i.startOf("day")),disabled:!this.isWithinMinMaxDate(a)}}isWithinMinMaxYear(e){const t=this.minDate?c.fromFormat(this.minDate,this.format).year:undefined;const r=this.maxDate?c.fromFormat(this.maxDate,this.format).year:undefined;const i=t?e<t:false;const o=r?e>r:false;return!i&&!o}isWithinMinMaxMonth(e){const t=this.minDate?c.fromFormat(this.minDate,this.format):undefined;const r=this.maxDate?c.fromFormat(this.maxDate,this.format):undefined;const i=t===null||t===void 0?void 0:t.month;const o=r===null||r===void 0?void 0:r.month;const a=i?this.tempYear===t.year&&e<i:false;const s=o?this.tempYear===r.year&&e>o:false;return!a&&!s}isWithinMinMaxDate(e){const t=this.minDate?c.fromFormat(this.minDate,this.format):undefined;const r=this.maxDate?c.fromFormat(this.maxDate,this.format):undefined;const i=t?e.startOf("day")<t.startOf("day"):false;const o=r?e.startOf("day")>r.startOf("day"):false;return!i&&!o}renderYears(){const e=[];for(let t=this.startYear;t<=this.endYear;t++){e.push(r("div",{key:t,class:{arrowYear:true,"month-dropdown-item":true,"disabled-item":!this.isWithinMinMaxYear(t)},onClick:e=>this.selectTempYear(e,t),onKeyUp:e=>{if(e.key==="Enter"){this.tempYear=t;this.focusMonth()}},tabIndex:0},r("ix-icon",{class:{hidden:this.tempYear!==t,arrowPosition:true},name:b,size:"12"}),r("div",{style:{"min-width":"max-content"}},`${t}`)))}return e}render(){return r(i,{key:"c572010198012b0665e0741ac6f2f280c22096f0"},r("ix-date-time-card",{key:"857ff058a49313ba01f69eb0403b2a32b9864b86",corners:this.corners,standaloneAppearance:this.standaloneAppearance},r("div",{key:"83368f09237939c0cc2d2ce7b4620f90615f8c57",class:"header",slot:"header"},r("ix-icon-button",{key:"89e152476b95ea3770dfb77ad6948a9250b0a1fa",onClick:()=>this.changeToAdjacentMonth(-1),ghost:true,icon:u,variant:"primary",class:"arrows"}),r("div",{key:"1a2ddbb791a05051745849b6b33da90a1ed6d53a",class:"selector"},r("ix-button",{key:"928e85ca6c02ccf0047b08101cfbb0a1d2a17fb6",ghost:true,ref:this.dropdownButtonRef,"data-testid":"year-month-button"},r("span",{key:"e723fa8c27d59c125f797b0adf36b07c0ead0a33",class:"fontSize capitalize"},this.monthNames[this.selectedMonth]," ",this.selectedYear)),r("ix-dropdown",{key:"3242fad1cd893de2b7c58cac2777eb71f3815f37","data-testid":"year-month-dropdown",class:"dropdown",trigger:this.dropdownButtonRef.waitForCurrent(),ignoreRelatedSubmenu:true,placement:"bottom-start"},r("div",{key:"72e107ef50026706d25e8a6291d791dac3288e2b",class:"wrapper"},r("div",{key:"962ea0d6c91bab3f9b6c86792d0d59687b30fbf4","data-testid":"year-container",class:"overflow",onScroll:()=>this.infiniteScrollYears(),ref:this.yearContainerRef},this.renderYears()),r("div",{key:"c1902b23595de8fe97cc8dbcde44da5dea65b5d9",class:"overflow","data-testid":"month-container"},this.monthNames.map(((e,t)=>r("div",{key:e,ref:t=>{if(e===this.monthNames[0]){this.firstMonthRef(t)}},class:{arrowYear:true,"month-dropdown-item":true,selected:this.tempYear===this.selectedYear&&this.tempMonth===t,"disabled-item":!this.isWithinMinMaxMonth(t)},onClick:()=>this.selectMonth(t),onKeyUp:e=>e.key==="Enter"&&this.selectMonth(t),tabIndex:0},r("ix-icon",{class:{hidden:this.tempYear!==this.selectedYear||this.tempMonth!==t,checkPosition:true},name:m,size:"16"}),r("div",null,r("span",{class:"capitalize monthMargin"},`${e} ${this.tempYear}`))))))))),r("ix-icon-button",{key:"d39bbbc40e27105d7f5575f95e17d777b2fc905a",onClick:()=>this.changeToAdjacentMonth(1),ghost:true,icon:b,variant:"primary",class:"arrows"})),r("div",{key:"8ce294f4edfc8578be98290467610d79ef8c1b78",class:{grid:true,"grid--show-week-numbers":this.showWeekNumbers}},this.showWeekNumbers&&r("div",{key:"0027a35f4c3841e57ed6ce0571183150b8b85e65",class:"calendar-item week-day"}),this.dayNames.map((e=>r("div",{key:e,class:"calendar-item week-day"},r("div",{class:"overflow"},e.slice(0,3))))),this.calendar.map((e=>r(a,null,this.showWeekNumbers&&r("div",{class:"calendar-item week-number"},e.weekNumber),e.dayNumbers.map((e=>e?r("div",{key:e,id:`day-cell-${e}`,"date-calender-day":true,class:this.getDayClasses(e),onClick:t=>{const r=t.currentTarget;this.selectDay(e,r)},onKeyUp:t=>{const r=t.currentTarget;if(t.key==="Enter"){this.selectDay(e,r)}},tabIndex:e===this.focusedDay?0:-1,onFocus:()=>this.onDayFocus(),onBlur:()=>this.onDayBlur()},e):r("div",null))))))),r("div",{key:"0c5f2867820eb6d58239a3d6029cb8aba2ddcc3c",class:{button:true,hidden:!this.range||!this.standaloneAppearance}},r("ix-button",{key:"d2f8f634517f6847490e579c47e2f3ec8aaecc34",onClick:()=>this.onDone()},this.i18nDone))))}get hostElement(){return s(this)}static get watchers(){return{from:["watchFromPropHandler"],to:["watchToPropHandler"],locale:["onLocaleChange"]}}};p([l("keydown")],v.prototype,"handleKeyUp",null);v.style=k;const y=":host{--ix-layout-grid-gutter:24px;display:block;flex:1 1 0%;width:100%;padding-left:calc(var(--ix-layout-grid-gutter) * 0.5);padding-right:calc(var(--ix-layout-grid-gutter) * 0.5)}:host(.no-margin){padding-left:0;padding-right:0}";const w=class{constructor(t){e(this,t);this.noMargin=false;this.gap="24";this.columns=12}render(){return r(i,{key:"90429a1d956a697a73dd9c7263ada3507c558547",class:{"no-margin":this.noMargin},style:{"--ix-layout-grid-columns":`${this.columns}`,"--ix-layout-grid-gutter":`${this.gap}px`}},r("slot",{key:"34f4bb1ff2d8fd675df91798bfda5ce3d7075fa3"}))}};w.style=y;const x=":host{display:flex;flex-wrap:wrap}:host(:not(:first-of-type)){margin-block-start:var(--ix-layout-grid-row-margin, 0)}";const D=class{constructor(t){e(this,t)}render(){return r(i,{key:"80ca71d97810db517f4b4f7992449b19c6337076"},r("slot",{key:"1bae8e11e1ca4a4625b17489110e460a5cfe5002"}))}};D.style=x;export{g as ix_col,v as ix_date_picker,w as ix_layout_grid,D as ix_row};
+//# sourceMappingURL=p-ec92f199.entry.js.map

package/dist/siemens-ix/p-ec92f199.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colCss","Col","onResize","forceUpdate","this","getSize","breakpoint","size","sizeSm","sizeMd","sizeLg","getColumnSize","Breakpoints","forEach","isMediaQueryActive","matchBreakpoint","currentSize","getColumnSizeStyling","flex","width","colSize","render","h","Host","key","style","Object","assign","datePickerCss","DatePicker","constructor","hostRef","format","range","corners","minDate","maxDate","i18nDone","weekStartIndex","showWeekNumbers","standaloneAppearance","today","DateTime","now","toISO","selectedYear","tempYear","startYear","endYear","selectedMonth","tempMonth","dropdownButtonRef","makeRef","yearContainerRef","firstMonthRef","focusedDay","isDayFocus","monthChangedFromFocus","DAYS_IN_WEEK","calendar","watchFromPropHandler","newValue","currFromDate","fromFormat","undefined","_a","isValid","year","month","watchToPropHandler","currToDate","onLocaleChange","setTranslations","getCurrentDate","_from","_b","toFormat","_to","_c","_d","from","to","handleKeyUp","event","_focusedDay","getDaysInCurrentMonth","changeToAdjacentMonth","utc","daysInMonth","getDateTimeNow","fromISO","onDayBlur","onDayFocus","componentWillLoad","componentWillRender","calculateCalendar","componentDidRender","dayElem","hostElement","shadowRoot","querySelector","focus","dayNames","rotateWeekDayNames","Info","weekdays","locale","monthNames","months","index","clone","len","length","push","splice","onDone","date","dateSelect","emit","monthStart","startOf","monthEnd","endOf","startWeek","weekNumber","endWeek","monthStartWeekDayIndex","weekday","monthEndWeekDayIndex","monthStartWeekDayName","findIndex","d","monthEndWeekDayName","correctLastWeek","weeksInWeekYear","correctFirstWeek","currDayNumber","weekIndex","daysArr","j","dayNumbers","selectTempYear","stopPropagation","focusMonth","current","infiniteScrollYears","yearContainer","scroll","scrollTop","maxScroll","scrollHeight","atTop","atBottom","Math","round","offsetHeight","limit","first","firstElementChild","scrollTo","offsetTop","last","lastElementChild","selectMonth","dropdown","show","number","selectDay","selectedDay","target","classList","contains","fromJSDate","Date","onDateChange","then","dateChange","dateRangeChange","getDayClasses","day","todayObj","selectedDayObj","hasSame","selected","disabled","isWithinMinMaxDate","isWithinMinMaxYear","minDateYear","maxDateYear","isBefore","isAfter","isWithinMinMaxMonth","minDateObj","maxDateObj","minDateMonth","maxDateMonth","_minDate","_maxDate","renderYears","rows","class","arrowYear","onClick","onKeyUp","tabIndex","hidden","arrowPosition","name","iconChevronRightSmall","slot","ghost","icon","iconChevronLeftSmall","variant","ref","trigger","waitForCurrent","ignoreRelatedSubmenu","placement","onScroll","map","checkPosition","iconSingleCheck","grid","slice","week","Fragment","id","e","currentTarget","onFocus","onBlur","button","__decorate","OnListener","prototype","layoutGridCss","LayoutGrid","noMargin","gap","columns","rowCss","Row"],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx","src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx","src/components/layout-grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/layout-grid/layout-grid.tsx","src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize(): ColumnSize | undefined {\n    let size: ColumnSize | undefined;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: 21rem;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .disabled-item {\n    pointer-events: none;\n    background-color: var(--theme-datepicker-day--background--disabled);\n    color: var(--theme-datepicker-day--color--disabled);\n    cursor: default;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .month-dropdown-item {\n      margin-left: 4px;\n      margin-right: 4px;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(7, 40px);\n    grid-template-rows: repeat(7, 40px);\n\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    &--show-week-numbers {\n      grid-template-columns: 24px repeat(7, 40px);\n    }\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &:first-child {\n        width: 24px;\n      }\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n          var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n              --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n              var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n              --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n\n        .overflow {\n          @include ellipsis;\n        }\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-weekday--color);\n        border: none;\n        background: none;\n        cursor: initial;\n        width: 1.5rem;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: $default-space;\n  }\n\n  .hidden {\n    display: none;\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  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\nimport { DateTime, Info } from 'luxon';\nimport { OnListener } from '../utils/listener';\nimport { IxDatePickerComponent } from './date-picker-component';\nimport { makeRef } from '../utils/make-ref';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n  iconSingleCheck,\n} from '@siemens/ix-icons/icons';\n\nexport type DateChangeEvent = {\n  from?: string;\n  to?: string;\n};\n\ninterface CalendarWeek {\n  weekNumber: number;\n  dayNumbers: (number | undefined)[];\n}\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker implements IxDatePickerComponent {\n  @Element() hostElement!: HTMLIxDatePickerElement;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * The selected starting date. If the date-picker-rework is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\n\n  @Watch('from')\n  watchFromPropHandler(newValue: string) {\n    this.currFromDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currFromDate?.isValid) {\n      this.selectedYear = this.currFromDate.year;\n      this.selectedMonth = this.currFromDate.month - 1;\n    }\n  }\n\n  /**\n   * The selected end date. If the the date-picker-rework is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\n\n  @Watch('to')\n  watchToPropHandler(newValue: string) {\n    this.currToDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currToDate?.isValid) {\n      this.selectedYear = this.currToDate.year;\n      this.selectedMonth = this.currToDate.month - 1;\n    }\n  }\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale?: string;\n\n  @Watch('locale')\n  onLocaleChange() {\n    this.setTranslations();\n  }\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /** @internal */\n  @Prop() standaloneAppearance = true;\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * Triggers if the date selection changes.\n   * Note: Since 2.0.0 `dateChange` does not dispatch detail property as `string`\n   *\n   * @since 2.1.0\n   */\n  @Event() dateChange!: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Triggers if the date selection changes.\n   * Only triggered if date-picker-rework is in range mode.\n   *\n   * @since 2.1.0\n   */\n  @Event() dateRangeChange!: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect!: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Get the currently selected date-range.\n   */\n  @Method()\n  async getCurrentDate() {\n    const _from = this.currFromDate?.isValid\n      ? this.currFromDate?.toFormat(this.format)\n      : undefined;\n    const _to = this.currToDate?.isValid\n      ? this.currToDate?.toFormat(this.format)\n      : undefined;\n\n    if (this.range) {\n      return {\n        from: _from,\n        to: _to,\n      };\n    }\n\n    return {\n      from: _from,\n      to: undefined,\n    };\n  }\n\n  @State() currFromDate?: DateTime;\n  @State() currToDate?: DateTime;\n\n  @State() selectedYear = 0;\n  @State() tempYear = 0;\n  @State() startYear = 0;\n  @State() endYear = 0;\n  @State() selectedMonth = 0;\n  @State() tempMonth = 0;\n\n  private readonly dropdownButtonRef = makeRef<HTMLElement>();\n  private readonly yearContainerRef = makeRef<HTMLElement>();\n  private readonly firstMonthRef = makeRef<HTMLElement>();\n\n  @State() dayNames!: string[];\n  @State() monthNames!: string[];\n  @State() focusedDay: number = 1;\n\n  private isDayFocus = false;\n  private monthChangedFromFocus = false;\n  private readonly DAYS_IN_WEEK = 7;\n  private calendar: CalendarWeek[] = [];\n\n  @OnListener<DatePicker>('keydown')\n  handleKeyUp(event: KeyboardEvent) {\n    if (!this.isDayFocus) {\n      return;\n    }\n\n    let _focusedDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        _focusedDay--;\n        break;\n      case 'ArrowRight':\n        _focusedDay++;\n        break;\n      case 'ArrowUp':\n        _focusedDay = _focusedDay - 7;\n        break;\n      case 'ArrowDown':\n        _focusedDay = _focusedDay + 7;\n        break;\n      default:\n        return;\n    }\n\n    if (_focusedDay > this.getDaysInCurrentMonth()) {\n      _focusedDay = _focusedDay - this.getDaysInCurrentMonth();\n      this.changeToAdjacentMonth(1);\n      this.monthChangedFromFocus = true;\n    } else if (_focusedDay < 1) {\n      this.changeToAdjacentMonth(-1);\n      _focusedDay = _focusedDay + this.getDaysInCurrentMonth();\n      this.monthChangedFromFocus = true;\n    }\n\n    this.focusedDay = _focusedDay;\n  }\n\n  private getDaysInCurrentMonth(): number {\n    return (\n      DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0\n    );\n  }\n\n  private getDateTimeNow() {\n    return DateTime.fromISO(this.today);\n  }\n\n  onDayBlur() {\n    this.isDayFocus = false;\n  }\n\n  onDayFocus() {\n    this.isDayFocus = true;\n  }\n\n  componentWillLoad() {\n    this.setTranslations();\n\n    this.currFromDate = this.from\n      ? DateTime.fromFormat(this.from, this.format)\n      : undefined;\n    this.currToDate = this.to\n      ? DateTime.fromFormat(this.to, this.format)\n      : undefined;\n\n    const year = this.currFromDate?.year ?? this.getDateTimeNow().year;\n    this.startYear = year - 5;\n    this.endYear = year + 5;\n\n    this.selectedMonth =\n      (this.currFromDate?.month ?? this.getDateTimeNow().month) - 1;\n    this.selectedYear = year;\n    this.tempMonth = this.selectedMonth;\n    this.tempYear = this.selectedYear;\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  componentDidRender() {\n    if (!this.monthChangedFromFocus && !this.isDayFocus) {\n      return;\n    }\n\n    const dayElem = this.hostElement.shadowRoot!.querySelector(\n      `[id=day-cell-${this.focusedDay}]`\n    ) as HTMLElement;\n    dayElem.focus();\n  }\n\n  private setTranslations() {\n    this.dayNames = this.rotateWeekDayNames(\n      Info.weekdays('long', {\n        locale: this.locale,\n      }),\n      this.weekStartIndex\n    );\n\n    this.monthNames = Info.months('long', {\n      locale: this.locale,\n    });\n  }\n\n  /**\n   * Rotate the WeekdayNames array.\n   * Based on the position that should be the new 0-index.\n   */\n  private rotateWeekDayNames(weekdays: string[], index: number): string[] {\n    const clone = [...weekdays];\n\n    if (index === 0) {\n      return clone;\n    }\n\n    index = -index;\n    const len = weekdays.length;\n\n    clone.push(...clone.splice(0, ((-index % len) + len) % len));\n    return clone;\n  }\n\n  private async onDone() {\n    const date = await this.getCurrentDate();\n    this.dateSelect.emit(date);\n  }\n\n  private calculateCalendar() {\n    const calendar: CalendarWeek[] = [];\n    const month = DateTime.utc(this.selectedYear, this.selectedMonth + 1);\n    const monthStart = month.startOf('month');\n    const monthEnd = month.endOf('month');\n    let startWeek = monthStart.weekNumber;\n    let endWeek = monthEnd.weekNumber;\n    let monthStartWeekDayIndex = monthStart.weekday - 1;\n    let monthEndWeekDayIndex = monthEnd.weekday - 1;\n\n    if (this.weekStartIndex !== 0) {\n      // Find the positions where to start/stop counting the day-numbers based on which day the week starts\n      const weekdays = Info.weekdays();\n      const monthStartWeekDayName = weekdays[monthStart.weekday];\n\n      monthStartWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthStartWeekDayName\n      );\n      const monthEndWeekDayName = weekdays[monthEnd.weekday];\n      monthEndWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthEndWeekDayName\n      );\n    }\n\n    let correctLastWeek = false;\n    if (endWeek === 1) {\n      endWeek = monthEnd.weeksInWeekYear + 1;\n      correctLastWeek = true;\n    }\n\n    let correctFirstWeek = false;\n    if (startWeek === monthStart.weeksInWeekYear) {\n      startWeek = 1;\n      endWeek++;\n\n      correctFirstWeek = true;\n    }\n\n    let currDayNumber = 1;\n    for (\n      let weekIndex = startWeek;\n      weekIndex <= endWeek && currDayNumber <= 31;\n      weekIndex++\n    ) {\n      const daysArr: (number | undefined)[] = [];\n\n      for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {\n        // Display empty cells until the calender starts/has ended\n        if (\n          (weekIndex === startWeek && j < monthStartWeekDayIndex) ||\n          (weekIndex === endWeek && j > monthEndWeekDayIndex)\n        ) {\n          daysArr.push(undefined);\n        } else {\n          daysArr.push(currDayNumber++);\n        }\n      }\n\n      if (correctFirstWeek || correctLastWeek) {\n        if (weekIndex === 1) {\n          calendar.push({\n            weekNumber: monthStart.weeksInWeekYear,\n            dayNumbers: daysArr,\n          });\n        } else if (weekIndex === monthEnd.weekNumber) {\n          calendar.push({\n            weekNumber: 1,\n            dayNumbers: daysArr,\n          });\n        } else {\n          calendar.push({\n            weekNumber: weekIndex - 1,\n            dayNumbers: daysArr,\n          });\n        }\n        continue;\n      }\n\n      calendar.push({\n        weekNumber: weekIndex,\n        dayNumbers: daysArr,\n      });\n    }\n\n    this.calendar = calendar;\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event?.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private focusMonth() {\n    this.firstMonthRef.current?.focus();\n  }\n\n  private infiniteScrollYears() {\n    const yearContainer = this.yearContainerRef.current;\n\n    if (!yearContainer) {\n      return;\n    }\n\n    const scroll = yearContainer.scrollTop;\n    const maxScroll = yearContainer.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;\n    const limit = 200;\n\n    if (this.endYear - this.startYear > limit) return;\n\n    if (atTop) {\n      const first = yearContainer.firstElementChild as HTMLElement;\n      this.startYear -= 5;\n      yearContainer.scrollTo(0, first.offsetTop);\n\n      return;\n    }\n\n    if (atBottom) {\n      const last = yearContainer.lastElementChild as HTMLElement;\n      this.endYear += 5;\n      yearContainer.scrollTo(0, last.offsetTop);\n    }\n  }\n\n  private selectMonth(month: number) {\n    this.selectedMonth = month;\n    this.selectedYear = this.tempYear;\n    this.tempMonth = month;\n\n    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n    if (dropdown) {\n      dropdown.show = false;\n    }\n  }\n\n  private changeToAdjacentMonth(number: -1 | 1) {\n    if (this.selectedMonth + number < 0) {\n      this.selectedYear--;\n      this.selectedMonth = 11;\n    } else if (this.selectedMonth + number > 11) {\n      this.selectedYear++;\n      this.selectedMonth = 0;\n    } else {\n      this.selectedMonth += number;\n    }\n  }\n\n  private selectDay(selectedDay: number, target: Element) {\n    if (target.classList.contains('disabled')) {\n      return;\n    }\n\n    const date = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, selectedDay)\n    );\n\n    if (!this.range || this.currFromDate === undefined) {\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Reset the range selection\n    if (this.currToDate !== undefined) {\n      this.currFromDate = date;\n      this.currToDate = undefined;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Swap from/to if the second date is before the current date\n    if (date < this.currFromDate) {\n      this.currToDate = this.currFromDate;\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Set the range normally\n    this.currToDate = date;\n    this.onDateChange();\n  }\n\n  private onDateChange() {\n    this.getCurrentDate().then((date) => {\n      this.dateChange.emit(date);\n      if (this.range) {\n        this.dateRangeChange.emit(date);\n      }\n    });\n  }\n\n  private getDayClasses(day: number): any {\n    const todayObj = this.getDateTimeNow();\n    const selectedDayObj = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, day)\n    );\n\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: todayObj.hasSame(selectedDayObj, 'day'),\n      selected:\n        this.currFromDate?.hasSame(selectedDayObj, 'day') ||\n        this.currToDate?.hasSame(selectedDayObj, 'day'),\n      range:\n        this.currFromDate &&\n        selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&\n        this.currToDate !== undefined &&\n        selectedDayObj.startOf('day') < this.currToDate?.startOf('day'),\n      disabled: !this.isWithinMinMaxDate(selectedDayObj),\n    };\n  }\n\n  private isWithinMinMaxYear(year: number): boolean {\n    const minDateYear = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format).year\n      : undefined;\n    const maxDateYear = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format).year\n      : undefined;\n    const isBefore = minDateYear ? year < minDateYear : false;\n    const isAfter = maxDateYear ? year > maxDateYear : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxMonth(month: number): boolean {\n    const minDateObj = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const maxDateObj = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const minDateMonth = minDateObj?.month;\n    const maxDateMonth = maxDateObj?.month;\n    const isBefore = minDateMonth\n      ? this.tempYear === minDateObj.year && month < minDateMonth\n      : false;\n    const isAfter = maxDateMonth\n      ? this.tempYear === maxDateObj.year && month > maxDateMonth\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxDate(date: DateTime): boolean {\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const isBefore = _minDate\n      ? date.startOf('day') < _minDate.startOf('day')\n      : false;\n    const isAfter = _maxDate\n      ? date.startOf('day') > _maxDate.startOf('day')\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private renderYears(): any[] {\n    const rows = [];\n\n    for (let year = this.startYear; year <= this.endYear; year++) {\n      rows.push(\n        <div\n          key={year}\n          class={{\n            arrowYear: true,\n            'month-dropdown-item': true,\n            'disabled-item': !this.isWithinMinMaxYear(year),\n          }}\n          onClick={(event) => this.selectTempYear(event, year)}\n          onKeyUp={(event) => {\n            if (event.key === 'Enter') {\n              this.tempYear = year;\n              this.focusMonth();\n            }\n          }}\n          tabIndex={0}\n        >\n          <ix-icon\n            class={{\n              hidden: this.tempYear !== year,\n              arrowPosition: true,\n            }}\n            name={iconChevronRightSmall}\n            size=\"12\"\n          ></ix-icon>\n          <div style={{ 'min-width': 'max-content' }}>{`${year}`}</div>\n        </div>\n      );\n    }\n\n    return rows;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card\n          corners={this.corners}\n          standaloneAppearance={this.standaloneAppearance}\n        >\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(-1)}\n              ghost\n              icon={iconChevronLeftSmall}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n            <div class=\"selector\">\n              <ix-button\n                ghost\n                ref={this.dropdownButtonRef}\n                data-testid=\"year-month-button\"\n              >\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.selectedMonth]} {this.selectedYear}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                data-testid=\"year-month-dropdown\"\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef.waitForCurrent()}\n                ignoreRelatedSubmenu\n                placement=\"bottom-start\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    data-testid=\"year-container\"\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={this.yearContainerRef}\n                  >\n                    {this.renderYears()}\n                  </div>\n                  <div class=\"overflow\" data-testid=\"month-container\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        ref={(ref) => {\n                          if (month === this.monthNames[0]) {\n                            this.firstMonthRef(ref);\n                          }\n                        }}\n                        class={{\n                          arrowYear: true,\n                          'month-dropdown-item': true,\n                          selected:\n                            this.tempYear === this.selectedYear &&\n                            this.tempMonth === index,\n                          'disabled-item': !this.isWithinMinMaxMonth(index),\n                        }}\n                        onClick={() => this.selectMonth(index)}\n                        onKeyUp={(event) =>\n                          event.key === 'Enter' && this.selectMonth(index)\n                        }\n                        tabIndex={0}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden:\n                              this.tempYear !== this.selectedYear ||\n                              this.tempMonth !== index,\n                            checkPosition: true,\n                          }}\n                          name={iconSingleCheck}\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span class=\"capitalize monthMargin\">{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(1)}\n              ghost\n              icon={iconChevronRightSmall}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n          <div\n            class={{\n              grid: true,\n              'grid--show-week-numbers': this.showWeekNumbers,\n            }}\n          >\n            {this.showWeekNumbers && <div class=\"calendar-item week-day\"></div>}\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                <div class=\"overflow\">{name.slice(0, 3)}</div>\n              </div>\n            ))}\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  {this.showWeekNumbers && (\n                    <div class=\"calendar-item week-number\">\n                      {week.weekNumber}\n                    </div>\n                  )}\n                  {week.dayNumbers.map((day) => {\n                    return day ? (\n                      <div\n                        key={day}\n                        id={`day-cell-${day}`}\n                        date-calender-day\n                        class={this.getDayClasses(day)}\n                        onClick={(e) => {\n                          const target = e.currentTarget as HTMLElement;\n                          this.selectDay(day, target);\n                        }}\n                        onKeyUp={(e) => {\n                          const target = e.currentTarget as HTMLElement;\n                          if (e.key === 'Enter') {\n                            this.selectDay(day, target);\n                          }\n                        }}\n                        tabIndex={day === this.focusedDay ? 0 : -1}\n                        onFocus={() => this.onDayFocus()}\n                        onBlur={() => this.onDayBlur()}\n                      >\n                        {day}\n                      </div>\n                    ) : (\n                      <div></div>\n                    );\n                  })}\n                </Fragment>\n              );\n            })}\n          </div>\n          <div\n            class={{\n              button: true,\n              hidden: !this.range || !this.standaloneAppearance,\n            }}\n          >\n            <ix-button onClick={() => this.onDone()}>{this.i18nDone}</ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n:host {\n  --ix-layout-grid-gutter: 24px;\n\n  display: block;\n  flex: 1 1 0%;\n  width: 100%;\n\n  padding-left: calc(var(--ix-layout-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n  padding-left: 0;\n  padding-right: 0;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-eccfb343.entry.js

@@ -0,0 +1,2 @@
+import{r,c as e,h as o,H as a}from"./p-DtF9fwpD.js";import{a as s}from"./p-Ou74PMQs.js";import{p as t,y as c,b as i,c as l,a as n,z as h,i as m}from"./p-CrTP-icT.js";const d=":host{margin:0.5rem 0.5rem 0rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;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 .alarm{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .critical{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-critical)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .success{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-success)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .neutral{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-neutral)}:host .primary{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-primary)}: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:normal;white-space:normal}:host ix-icon{margin-top:0.25rem}:host .message-bar-hidden{display:none}";const b=class{constructor(o){r(this,o);this.closedChange=e(this,"closedChange",7);this.closeAnimationCompleted=e(this,"closeAnimationCompleted",7);this.type="info";this.dismissible=true}componentWillRender(){const r=b.messageTypeConfigs[this.type];if(r){this.icon=r.icon;this.color=r.color}}closeAlert(r){const{defaultPrevented:e}=this.closedChange.emit();if(!e){s({targets:r,duration:b.duration,opacity:[1,0],easing:"easeOutSine",complete:()=>{r.classList.add("message-bar-hidden");this.closeAnimationCompleted.emit()}})}}render(){return o(a,{key:"d4c459da3c13935d7b220fa16c69a1e83e07a265"},o("div",{key:"3437dc7d4e4d06b6a7ae1eb88d77926a9aec5281",class:{"message-container":true,[this.type]:true},role:"alert",ref:r=>this.divElement=r},o("ix-icon",{key:"65d013368d9c75a8662a9cf5882f883683f11c2b",color:this.color,name:this.icon}),o("div",{key:"3a2dcc32c2cda27873ca0efefdf568d932c88951",class:"message-content"},o("slot",{key:"55c27362c491e1f66e87903a956c8c68a227c856"})),this.dismissible?o("ix-icon-button",{icon:t,size:"24",ghost:true,onClick:()=>{if(this.divElement){this.closeAlert(this.divElement)}},"data-testid":"close-btn"}):""))}};b.duration=300;b.messageTypeConfigs={alarm:{icon:m,color:"color-alarm"},danger:{icon:m,color:"color-alarm"},critical:{icon:h,color:"color-critical"},warning:{icon:n,color:"color-warning"},success:{icon:l,color:"color-success"},info:{icon:i,color:"color-info"},neutral:{icon:c,color:"color-neutral"},primary:{icon:c,color:"color-primary"}};b.style=d;export{b as ix_message_bar};
+//# sourceMappingURL=p-eccfb343.entry.js.map

package/dist/siemens-ix/p-eccfb343.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["messageBarCss","MessageBar","constructor","hostRef","this","type","dismissible","componentWillRender","config","messageTypeConfigs","icon","color","closeAlert","el","defaultPrevented","closedChange","emit","anime","targets","duration","opacity","easing","complete","classList","add","closeAnimationCompleted","render","h","Host","key","class","role","ref","divElement","name","iconClose","size","ghost","onClick","alarm","iconError","danger","critical","iconWarningRhomb","warning","iconWarning","success","iconSuccess","info","iconInfo","neutral","iconNotification","primary"],"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  margin: $small-space $small-space 0rem $small-space;\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    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  $message-types: (\n    'alarm': var(--theme-color-alarm),\n    'danger': var(--theme-color-alarm),\n    'critical': var(--theme-color-critical),\n    'warning': var(--theme-color-warning),\n    'success': var(--theme-color-success),\n    'info': var(--theme-color-info),\n    'neutral': var(--theme-color-neutral),\n    'primary': var(--theme-color-primary)\n  );\n\n  @each $type, $color in $message-types {\n    .#{$type} {\n      border: solid var(--theme-message-bar--border-thickness) $color;\n    }\n  }\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: normal;\n    white-space: normal;\n  }\n\n  ix-icon {\n    margin-top: $tiny-space;\n  }\n\n  .message-bar-hidden {\n    display: none;\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';\nimport {\n  iconClose,\n  iconError,\n  iconInfo,\n  iconNotification,\n  iconSuccess,\n  iconWarning,\n  iconWarningRhomb,\n} from '@siemens/ix-icons/icons';\n\ninterface MessageTypeConfig {\n  icon?: string;\n  color: NotificationColor;\n}\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   * @deprecated Type `danger` will be removed in 4.0. Use `alarm` instead.\n   */\n  @Prop() type:\n    | 'alarm'\n    | 'danger'\n    | 'critical'\n    | 'warning'\n    | 'success'\n    | 'info'\n    | 'neutral'\n    | 'primary' = '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  /**\n   * An event emitted when the close animation is completed\n   */\n  @Event() closeAnimationCompleted!: EventEmitter;\n\n  @State() icon?: string;\n  @State() color?: NotificationColor;\n\n  private static readonly duration = 300;\n  private static readonly messageTypeConfigs: Record<\n    string,\n    MessageTypeConfig\n  > = {\n    alarm: { icon: iconError, color: 'color-alarm' },\n    danger: { icon: iconError, color: 'color-alarm' },\n    critical: { icon: iconWarningRhomb, color: 'color-critical' },\n    warning: { icon: iconWarning, color: 'color-warning' },\n    success: { icon: iconSuccess, color: 'color-success' },\n    info: { icon: iconInfo, color: 'color-info' },\n    neutral: { icon: iconNotification, color: 'color-neutral' },\n    primary: { icon: iconNotification, color: 'color-primary' },\n  };\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    const config = MessageBar.messageTypeConfigs[this.type];\n    if (config) {\n      this.icon = config.icon;\n      this.color = config.color;\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    const { defaultPrevented } = this.closedChange.emit();\n\n    if (!defaultPrevented) {\n      anime({\n        targets: el,\n        duration: MessageBar.duration,\n        opacity: [1, 0],\n        easing: 'easeOutSine',\n        complete: () => {\n          el.classList.add('message-bar-hidden');\n          this.closeAnimationCompleted.emit();\n        },\n      });\n    }\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={iconClose}\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                if (this.divElement) {\n                  this.closeAlert(this.divElement);\n                }\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sKAAA,MAAMA,EAAgB,+qE,MCwCTC,EAAU,MALvB,WAAAC,CAAAC,G,sHAUUC,KAAIC,KAQI,OAKRD,KAAWE,YAAG,IAwFvB,CAxDC,mBAAAC,GACE,MAAMC,EAASP,EAAWQ,mBAAmBL,KAAKC,MAClD,GAAIG,EAAQ,CACVJ,KAAKM,KAAOF,EAAOE,KACnBN,KAAKO,MAAQH,EAAOG,K,EAIhB,UAAAC,CAAWC,GACjB,MAAMC,iBAAEA,GAAqBV,KAAKW,aAAaC,OAE/C,IAAKF,EAAkB,CACrBG,EAAM,CACJC,QAASL,EACTM,SAAUlB,EAAWkB,SACrBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRC,SAAU,KACRT,EAAGU,UAAUC,IAAI,sBACjBpB,KAAKqB,wBAAwBT,MAAM,G,EAM3C,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAE,oBAAqB,KAAM,CAAC1B,KAAKC,MAAO,MACjD0B,KAAK,QACLC,IAAMnB,GAAQT,KAAK6B,WAAapB,GAEhCc,EAAS,WAAAE,IAAA,2CAAAlB,MAAOP,KAAKO,MAAOuB,KAAM9B,KAAKM,OACvCiB,EAAK,OAAAE,IAAA,2CAAAC,MAAM,mBACTH,EAAA,QAAAE,IAAA,8CAEDzB,KAAKE,YACJqB,EAAA,kBACEjB,KAAMyB,EACNC,KAAK,KACLC,MAAO,KACPC,QAAS,KACP,GAAIlC,KAAK6B,WAAY,CACnB7B,KAAKQ,WAAWR,KAAK6B,W,GAGb,4BACI,I,GAjEJhC,EAAQkB,SAAG,IACXlB,EAAAQ,mBAGpB,CACF8B,MAAO,CAAE7B,KAAM8B,EAAW7B,MAAO,eACjC8B,OAAQ,CAAE/B,KAAM8B,EAAW7B,MAAO,eAClC+B,SAAU,CAAEhC,KAAMiC,EAAkBhC,MAAO,kBAC3CiC,QAAS,CAAElC,KAAMmC,EAAalC,MAAO,iBACrCmC,QAAS,CAAEpC,KAAMqC,EAAapC,MAAO,iBACrCqC,KAAM,CAAEtC,KAAMuC,EAAUtC,MAAO,cAC/BuC,QAAS,CAAExC,KAAMyC,EAAkBxC,MAAO,iBAC1CyC,QAAS,CAAE1C,KAAMyC,EAAkBxC,MAAO,kB","ignoreList":[]}

package/dist/siemens-ix/p-ecefabdb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as s}from"./p-DtF9fwpD.js";const a=":host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}";const d=class{constructor(t){e(this,t);this.striped=false}render(){return t(s,{key:"7d8dd7871cd6618bc773f7d71feea75fa0506d8e",class:{keyValueList:true,"keyValueList--striped":this.striped}},t("slot",{key:"1ad1d9d4acf4bdcbe766bb40583d4fe6e1fe60f3"}))}};d.style=a;export{d as ix_key_value_list};
+//# sourceMappingURL=p-ecefabdb.entry.js.map

package/dist/siemens-ix/p-ecefabdb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["keyValueListCss","KeyValueList","constructor","hostRef","this","striped","render","h","Host","key","class","keyValueList"],"sources":["src/components/key-value-list/key-value-list.scss?tag=ix-key-value-list&encapsulation=shadow","src/components/key-value-list/key-value-list.tsx"],"sourcesContent":[":host(.keyValueList) {\n  ::slotted(ix-key-value) {\n    border-bottom: 1px solid var(--theme-color-weak-bdr);\n  }\n}\n\n:host(.keyValueList.keyValueList--striped) {\n  ::slotted(ix-key-value:nth-child(odd)) {\n    background: var(--theme-color-ghost-alt);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value-list',\n  styleUrl: 'key-value-list.scss',\n  shadow: true,\n})\nexport class KeyValueList {\n  /**\n   * Optional striped key value list style\n   */\n  @Prop() striped: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,8N,MCmBXC,EAAY,MALzB,WAAAC,CAAAC,G,UASUC,KAAOC,QAAY,KAW5B,CATC,MAAAC,GACE,OACEC,EAACC,EACC,CAAAC,IAAA,2CAAAC,MAAO,CAAEC,aAAc,KAAM,wBAAyBP,KAAKC,UAE3DE,EAAa,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/siemens-ix/p-ee807086.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,H as t}from"./p-DtF9fwpD.js";const d=":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}";const s=class{constructor(a){e(this,a)}render(){return a(t,{key:"2a6a6009ce9985b2926467ddb57efd988845a5f0"},a("ix-spinner",{key:"ed44fc7dc7dfa9d77056a34473b8d585718cecd8",variant:"primary"}),a("span",{key:"5a1ac39aedabce8e5c49a5c048fb26cd7d76255c",class:"loading-text"},a("slot",{key:"d23c2fd6cd045f26c22c728845bbd37082894732"})))}};s.style=d;export{s as ix_modal_loading};
+//# sourceMappingURL=p-ee807086.entry.js.map

package/dist/siemens-ix/p-ee807086.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalLoadingCss","ModalLoading","render","h","Host","key","variant","class"],"sources":["src/components/modal-loading/modal-loading.scss?tag=ix-modal-loading&encapsulation=shadow","src/components/modal-loading/modal-loading.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:host {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  overflow: hidden;\n\n  .loading-text {\n    display: block;\n    position: relative;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-modal-loading',\n  styleUrl: 'modal-loading.scss',\n  shadow: true,\n})\nexport class ModalLoading {\n  render() {\n    return (\n      <Host>\n        <ix-spinner variant=\"primary\"></ix-spinner>\n        <span class={'loading-text'}>\n          <slot></slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,6M,MCmBXC,EAAY,M,yBACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAY,cAAAE,IAAA,2CAAAC,QAAQ,YACpBH,EAAM,QAAAE,IAAA,2CAAAE,MAAO,gBACXJ,EAAa,QAAAE,IAAA,8C","ignoreList":[]}