@siemens/ix 2.4.0 → 2.4.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["OverlayController","constructor","this","overlays","Set","connected","instance","add","disconnected","delete","present","willPresent","dismissOthers","dismiss","willDismiss","forEach","overlay","TooltipController","tooltipController","tooltipCss","IxTooltipStyle0","numberToPixel","value","Tooltip","arrowElement","hostElement","shadowRoot","querySelector","destroyAutoUpdate","disposeAutoUpdate","undefined","showTooltip","anchorElement","clearTimeout","hideTooltipTimeout","applyTooltipPosition","showTooltipTimeout","setTimeout","showDelay","hideTooltip","hideDelay","interactive","computeArrowPosition","placement","middlewareData","x","y","arrow","startsWith","left","top","right","computeTooltipPosition","target","computePosition","strategy","middleware","shift","offset","element","flip","fallbackStrategy","padding","applyTooltipArrowPosition","computeResponse","arrowPosition","Object","assign","style","Promise","resolve","autoUpdate","async","ancestorResize","ancestorScroll","elementResize","animationFrame","clearHideTimeout","queryAnchorElements","for","Array","from","document","querySelectorAll","HTMLElement","registerTriggerListener","triggerElementList","disposeListener","onMouseEnter","onMouseLeave","onFocusIn","onFocusOut","addEventListener","removeEventListener","registerTooltipListener","onKeydown","event","code","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","body","attributes","attributeFilter","childList","subtree","connectedCallback","disconnectedCallback","_a","disconnect","isPresent","visible","render","h","Host","key","class","role","name","variant","titleContent","__decorate","OnListener","self"],"sources":["src/components/utils/overlay.ts","src/components/tooltip/tooltip-controller.ts","src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.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 */\nimport { IxComponent } from '../utils/internal';\n\nexport interface IxOverlayComponent extends IxComponent {\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport class OverlayController {\n  overlays: Set<IxOverlayComponent> = new Set();\n\n  connected(instance: IxOverlayComponent): void {\n    this.overlays.add(instance);\n  }\n\n  disconnected(instance: IxOverlayComponent): void {\n    this.overlays.delete(instance);\n  }\n\n  present(instance: IxOverlayComponent): void {\n    if (instance.willPresent && !instance.willPresent()) {\n      return;\n    }\n    this.dismissOthers(instance);\n    instance.present();\n  }\n\n  dismiss(instance: IxOverlayComponent): void {\n    if (instance.willDismiss && !instance.willDismiss()) {\n      return;\n    }\n    instance.dismiss();\n  }\n\n  private dismissOthers(instance: IxOverlayComponent): void {\n    this.overlays.forEach((overlay) => {\n      if (overlay !== instance) {\n        this.dismiss(overlay);\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 { OverlayController } from '../utils/overlay';\n\nclass TooltipController extends OverlayController {}\n\nexport const tooltipController = new TooltipController();\n",":host {\n  display: inline-block;\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  z-index: var(--theme-z-index-tooltip);\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse !important;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible !important;\n}\n\n:host(.visible) {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for?: string | HTMLElement | Promise<HTMLElement>;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent?: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip. If the placement don\"t have enough space,\n   * the tooltip will placed on another location.\n   *\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  /** @internal */\n  @Prop() showDelay = 0;\n\n  /** @internal */\n  @Prop() hideDelay = 50;\n\n  /** @internal */\n  @Prop() animationFrame = false;\n\n  @State() visible = false;\n\n  @Element() hostElement!: HTMLIxTooltipElement;\n\n  private observer?: MutationObserver;\n  private hideTooltipTimeout?: NodeJS.Timeout;\n  private showTooltipTimeout?: NodeJS.Timeout;\n  private disposeAutoUpdate?: () => void;\n  private disposeListener?: () => void;\n\n  private get arrowElement(): HTMLElement {\n    return this.hostElement.shadowRoot.querySelector('.arrow');\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async showTooltip(anchorElement: Element) {\n    clearTimeout(this.hideTooltipTimeout);\n    await this.applyTooltipPosition(anchorElement);\n\n    this.showTooltipTimeout = setTimeout(() => {\n      tooltipController.present(this);\n      // Need to compute and apply tooltip position after initial render,\n      // because arrow has no valid bounding rect before that\n      this.applyTooltipPosition(anchorElement);\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  @Method()\n  async hideTooltip() {\n    clearTimeout(this.showTooltipTimeout);\n    let hideDelay = 50;\n\n    if (this.interactive && this.hideDelay === hideDelay) {\n      hideDelay = 150;\n    }\n\n    this.hideTooltipTimeout = setTimeout(() => {\n      tooltipController.dismiss(this);\n    }, hideDelay);\n    this.destroyAutoUpdate();\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition {\n    let { x, y } = middlewareData.arrow;\n\n    if (placement.startsWith('top')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        left: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(-6),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        right: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(target: Element) {\n    return computePosition(target, this.hostElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      middleware: [\n        shift(),\n        offset(12),\n        arrow({\n          element: this.arrowElement,\n        }),\n        flip({\n          fallbackStrategy: 'initialPlacement',\n          padding: 10,\n        }),\n      ],\n    });\n  }\n\n  private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n    const arrowPosition = this.computeArrowPosition(computeResponse);\n    Object.assign(this.arrowElement.style, arrowPosition);\n  }\n\n  private async applyTooltipPosition(target: Element) {\n    if (!target) {\n      return;\n    }\n\n    return new Promise<ComputePositionReturn>((resolve) => {\n      this.destroyAutoUpdate();\n      this.disposeAutoUpdate = autoUpdate(\n        target,\n        this.hostElement,\n        async () => {\n          setTimeout(async () => {\n            const computeResponse = await this.computeTooltipPosition(target);\n\n            if (computeResponse.middlewareData.arrow) {\n              this.applyTooltipArrowPosition(computeResponse);\n            }\n\n            const { x, y } = computeResponse;\n            Object.assign(this.hostElement.style, {\n              left: x !== null ? `${x}px` : '',\n              top: y !== null ? `${y}px` : '',\n            });\n\n            resolve(computeResponse);\n          });\n        },\n        {\n          ancestorResize: true,\n          ancestorScroll: true,\n          elementResize: true,\n          animationFrame: this.animationFrame,\n        }\n      );\n    });\n  }\n\n  private clearHideTimeout() {\n    if (this.interactive) {\n      clearTimeout(this.hideTooltipTimeout);\n    }\n  }\n\n  private async queryAnchorElements(): Promise<Array<HTMLElement> | undefined> {\n    if (typeof this.for === 'string') {\n      return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n    }\n\n    if (this.for instanceof HTMLElement) {\n      return Promise.resolve([this.for]);\n    }\n\n    if (this.for instanceof Promise) {\n      const element = await this.for;\n      return [element];\n    }\n  }\n\n  private async registerTriggerListener() {\n    const triggerElementList = await this.queryAnchorElements();\n\n    if (this.disposeListener) {\n      this.disposeListener();\n    }\n\n    if (!triggerElementList) {\n      return;\n    }\n\n    triggerElementList.forEach((element) => {\n      const onMouseEnter = () => {\n        this.showTooltip(element);\n      };\n\n      const onMouseLeave = () => {\n        this.hideTooltip();\n      };\n\n      const onFocusIn = () => {\n        if (this.showTooltipTimeout !== undefined) {\n          clearTimeout(this.showTooltipTimeout);\n        }\n\n        onMouseEnter();\n      };\n\n      const onFocusOut = () => {\n        this.hideTooltip();\n      };\n\n      element.addEventListener('mouseenter', onMouseEnter);\n      element.addEventListener('mouseleave', onMouseLeave);\n      element.addEventListener('focusin', onFocusIn);\n      element.addEventListener('focusout', onFocusOut);\n\n      this.disposeListener = () => {\n        element.removeEventListener('mouseenter', onMouseEnter);\n        element.removeEventListener('mouseleave', onMouseLeave);\n        element.removeEventListener('focusin', onFocusIn);\n        element.removeEventListener('focusout', onFocusOut);\n      };\n    });\n  }\n\n  private registerTooltipListener() {\n    const { hostElement } = this;\n    hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n    hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n    hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n    hostElement.addEventListener('focusout', () => this.hideTooltip());\n  }\n\n  @OnListener<Tooltip>('keydown', (self) => self.visible)\n  async onKeydown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.hideTooltip();\n    }\n  }\n\n  componentWillLoad() {\n    this.registerTriggerListener();\n  }\n\n  componentDidLoad() {\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTooltipListener();\n  }\n\n  connectedCallback() {\n    tooltipController.connected(this);\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n    tooltipController.disconnected(this);\n  }\n\n  isPresent(): boolean {\n    return this.visible;\n  }\n\n  present(): void {\n    this.visible = true;\n  }\n\n  dismiss(): void {\n    this.visible = false;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n        role=\"tooltip\"\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={'tooltip-content'}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,H as a,g as o}from"./p-f87cd962.js";import{b as i}from"./p-4f8ac3bf.js";import{O as s}from"./p-0c8a98cd.js";const n=':host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}: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 input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace:not(.hide-trace-reference)::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}';const l=n;var c=undefined&&undefined.__decorate||function(t,e,r,a){var o=arguments.length,i=o<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,r):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(t,e,r,a);else for(var n=t.length-1;n>=0;n--)if(s=t[n])i=(o<3?s(i):o>3?s(e,r,i):s(e,r))||i;return o>3&&i&&Object.defineProperty(e,r,i),i};function h(t,e,r){if(e<t){return t}else if(e>r){return r}else{return e}}const d=class{constructor(r){t(this,r);this.valueChange=e(this,"valueChange",7);this.step=1;this.min=0;this.max=100;this.value=0;this.marker=undefined;this.trace=false;this.traceReference=0;this.disabled=false;this.error=undefined;this.rangeInput=0;this.rangeMin=0;this.rangeMax=100;this.rangeTraceReference=0;this.showTooltip=false}get tooltip(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector("ix-tooltip")}get pseudoThumb(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector(".thumb")}get slider(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.getElementById("slider")}onShowTooltipChange(){var t,e;if(this.showTooltip){(t=this.tooltip)===null||t===void 0?void 0:t.showTooltip(this.pseudoThumb);return}(e=this.tooltip)===null||e===void 0?void 0:e.hideTooltip()}componentWillLoad(){this.a11yAttributes=i(this.hostElement,["role","aria-valuemin","aria-valuemax","aria-valuenow"]);this.updateRangeVariables()}updateRangeVariables(){this.rangeInput=h(this.min,this.value,this.max);this.rangeTraceReference=h(this.min,this.traceReference,this.max);this.rangeMin=Math.min(this.min,this.max);this.rangeMax=Math.max(this.min,this.max)}onInput(t){t.stopPropagation();const e=parseInt(this.slider.value);if(!isNaN(e)){this.rangeInput=e;this.emitInputEvent()}}emitInputEvent(){this.valueChange.emit(this.rangeInput)}isMarkerActive(t){const e=Math.min(this.traceReference,this.rangeInput);const r=Math.max(this.traceReference,this.rangeInput);const a=t;return a>=e&&a<=r}onPointerUp(){this.showTooltip=false}render(){const t=this.rangeMax-this.rangeMin;let e=(this.rangeTraceReference-this.rangeMin)/t;let o=(this.rangeInput-this.rangeMin)/t;const i=o-e;let s=e;let n=o;if(i<=0){s=o;n=e}return r(a,{key:"c7e6a14875ee17d49fe5e42459b81fb561802ebc",class:{disabled:this.disabled,error:!!this.error},onPointerDown:()=>setTimeout((()=>this.showTooltip=true))},r("div",{key:"bed770beec56a4798df1c0b8546fd78ef6c1f749",class:"slider"},r("div",{key:"b2337e7802806933356cc7930bcb5a0e025796b8",class:"track"},r("div",{key:"d5d40d3e44d50112733e5c9137b807e3a25dcafa",class:"thumb",style:{left:`calc(${o} * 100% - 8px)`}}),r("div",{key:"041f4368d4b80929a03abfbe617d8f5bb15957d0",class:"ticks"},this.marker?this.marker.map((e=>{if(e>this.max||e<this.min){return}let a=(e-this.rangeMin)/t;return r("div",{class:{tick:true,"tick-active":this.isMarkerActive(e)&&this.trace},style:{"--tick-value":`${a}`}})})):null)),r("input",Object.assign({key:"ef61a64f69ebc8816778dfd95dee2402b0ed9144",id:"slider",type:"range",list:this.marker?"markers":undefined,step:this.step,min:this.min,max:this.max,value:this.rangeInput,tabindex:this.disabled?-1:0,onInput:t=>this.onInput(t),style:{"--value":`${o}`,"--trace-reference":`${e}`,"--trace-start":`${s}`,"--trace-end":`${n}`},class:{trace:this.trace&&e!==o,"hide-trace-reference":this.trace&&(this.traceReference<=this.min||this.traceReference>=this.max)},onFocus:()=>{this.showTooltip=true},onBlur:()=>{this.showTooltip=false},role:"slider","aria-valuenow":this.rangeInput,"aria-valuemin":this.min,"aria-valuemax":this.max},this.a11yAttributes)),r("ix-tooltip",{key:"4dfe584376f3df426be2e049703adfb4c2bf39ab",class:{"hide-tooltip":!this.showTooltip},animationFrame:true},this.rangeInput)),r("div",{key:"9c42a9aa11e4c59c2fa9f0b132d6ac3a2b4f8f72",class:"label"},r("div",{key:"22ed6e4412f84449c68109dd5619054a65d8790f",class:"label-start"},r("slot",{key:"676a5d1b03b6a398bda253f01396c06ccb7cdb04",name:"label-start"})),r("div",{key:"7ec74b8f1f5a4a6e0eb4dd2b1bd8c32aa098f47c",class:"label-end"},r("slot",{key:"1a4b99aebbe60d9db5e4ed5c26907aecf2a38568",name:"label-end"}))),this.error?r("ix-typography",{class:"label-error",color:"alarm"},this.error):null)}get hostElement(){return o(this)}static get watchers(){return{showTooltip:["onShowTooltipChange"],value:["updateRangeVariables"],max:["updateRangeVariables"],min:["updateRangeVariables"],traceReference:["updateRangeVariables"]}}};c([s("pointerup",(t=>t.showTooltip))],d.prototype,"onPointerUp",null);d.style=l;export{d as ix_slider};
+//# sourceMappingURL=p-d950c3a8.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sliderCss","IxSliderStyle0","between","min","value","max","Slider","tooltip","_a","this","hostElement","shadowRoot","querySelector","pseudoThumb","slider","getElementById","onShowTooltipChange","showTooltip","_b","hideTooltip","componentWillLoad","a11yAttributes","a11yHostAttributes","updateRangeVariables","rangeInput","rangeTraceReference","traceReference","rangeMin","Math","rangeMax","onInput","event","stopPropagation","parseInt","isNaN","emitInputEvent","valueChange","emit","isMarkerActive","markerValue","start","end","onPointerUp","render","range","traceReferenceInPercentage","valueInPercentage","distance","traceStart","traceEnd","h","Host","key","class","disabled","error","onPointerDown","setTimeout","style","left","marker","map","tick","trace","Object","assign","id","type","list","undefined","step","tabindex","onFocus","onBlur","role","animationFrame","name","color","__decorate","OnListener","self"],"sources":["src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","src/components/slider/slider.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@mixin track {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-runnable-track {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-track {\n    @content;\n  }\n}\n\n@mixin clear-browser-thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range' i]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-top: -6px;\n  }\n\n  // Firefox\n  input[type='range' i]::-moz-range-thumb {\n    border: none;\n    border-radius: 0;\n  }\n}\n\n@mixin thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-hover {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:hover::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:hover::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-active {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:active::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:active::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-focus {\n  input[type='range']:focus {\n    outline: none;\n  }\n\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:focus-visible::-moz-range-thumb {\n    @content;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n  --trace-reference-color: var(--theme-color-8);\n  --trace-color: var(--theme-color-dynamic);\n  --tick-color: var(--theme-color-8);\n  --tick-color--active: var(--theme-color-dynamic);\n  --track-color: var(--theme-color-component-4);\n\n  input[type='range'] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n    height: 1rem;\n    margin: 0;\n  }\n\n  // Trace line\n  input[type='range'].trace::before {\n    content: '';\n    position: absolute;\n    display: block;\n    z-index: -1;\n\n    width: calc(\n      calc(7px + calc(100% * var(--trace-end)) - calc(16px * var(--trace-end))) -\n        calc(\n          7px + calc(100% * var(--trace-start)) -\n            calc(16px * var(--trace-start))\n        )\n    );\n\n    left: calc(\n      7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n    );\n\n    height: 4px;\n    background-color: var(--trace-color);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  // Trace reference\n  input[type='range'].trace:not(.hide-trace-reference)::after {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 2px;\n    height: 16px;\n    background-color: var(--trace-reference-color);\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(\n      7px + calc(100% * var(--trace-reference)) -\n        calc(16px * var(--trace-reference))\n    );\n  }\n\n  @include track() {\n    background: transparent;\n    height: 0.25rem;\n  }\n\n  @include clear-browser-thumb();\n\n  @include thumb() {\n    border-radius: 100px;\n    background-color: var(--theme-color-dynamic);\n    height: var(--thumb-size);\n    width: var(--thumb-size);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 10;\n  }\n\n  @include thumb-hover() {\n    transform: scale(1.2);\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-focus() {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 0.125rem;\n  }\n\n  /* style datalist */\n  .ticks {\n    display: flex;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .ticks .tick {\n    display: block;\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background-color: var(--tick-color);\n    border-radius: 100px;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--tick-value) * 100% - 4px);\n  }\n\n  .ticks .tick.tick-active {\n    background-color: var(--tick-color--active);\n  }\n\n  .slider {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 1.5rem;\n  }\n\n  .track {\n    position: absolute;\n    background-color: var(--track-color);\n    height: 4px;\n    width: calc(100% - 1rem);\n    margin-left: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0px;\n  }\n\n  .thumb {\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 100px;\n    left: 0px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .hide-tooltip {\n    display: none;\n  }\n\n  .label {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    margin-top: 0.5rem;\n\n    min-height: 0px;\n  }\n\n  .label-start {\n    margin-left: 0.5rem;\n  }\n\n  .label-end {\n    margin-right: 0.5rem;\n  }\n\n  .label-error {\n    margin-left: 0.5rem;\n  }\n}\n\n:host(.error) {\n  --trace-color: var(--theme-color-alarm-40);\n  --tick-color--active: var(--theme-color-alarm);\n\n  @include thumb() {\n    background-color: var(--theme-color-alarm);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-color-component-3);\n  --trace-color: var(--theme-color-3);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-7);\n\n  @include thumb() {\n    background-color: var(--theme-color-7);\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  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n  if (value < min) {\n    return min;\n  } else if (value > max) {\n    return max;\n  } else {\n    return value;\n  }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n  tag: 'ix-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class Slider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Minimum slider value\n   */\n  @Prop() min = 0;\n\n  /**\n   * Maximum slider value\n   */\n  @Prop() max = 100;\n\n  /**\n   * Current value of the slider\n   */\n  @Prop() value = 0;\n\n  /**\n   * Define tick marker on the slider. Marker has to be within slider min/max\n   */\n  @Prop() marker?: SliderMarker;\n\n  /**\n   * Show a trace line\n   */\n  @Prop() trace = false;\n\n  /**\n   * Define the start point of the trace line\n   */\n  @Prop() traceReference = 0;\n\n  /**\n   * Show control as disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show error state and message\n   */\n  @Prop() error?: boolean | string;\n\n  /**\n   *\n   */\n  @Event() valueChange!: EventEmitter<number>;\n\n  @State() rangeInput = 0;\n  @State() rangeMin = 0;\n  @State() rangeMax = 100;\n  @State() rangeTraceReference = 0;\n  @State() showTooltip = false;\n\n  private a11yAttributes?: A11yAttributes;\n\n  get tooltip() {\n    return this.hostElement.shadowRoot?.querySelector('ix-tooltip');\n  }\n\n  get pseudoThumb() {\n    return this.hostElement.shadowRoot?.querySelector('.thumb') as HTMLElement;\n  }\n\n  get slider() {\n    return this.hostElement.shadowRoot?.getElementById(\n      'slider'\n    ) as HTMLInputElement;\n  }\n\n  @Watch('showTooltip')\n  onShowTooltipChange() {\n    if (this.showTooltip) {\n      this.tooltip?.showTooltip(this.pseudoThumb);\n      return;\n    }\n\n    this.tooltip?.hideTooltip();\n  }\n\n  componentWillLoad() {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n      'role',\n      'aria-valuemin',\n      'aria-valuemax',\n      'aria-valuenow',\n    ]);\n    this.updateRangeVariables();\n  }\n\n  @Watch('value')\n  @Watch('max')\n  @Watch('min')\n  @Watch('traceReference')\n  private updateRangeVariables() {\n    this.rangeInput = between(this.min, this.value, this.max);\n    this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n    this.rangeMin = Math.min(this.min, this.max);\n    this.rangeMax = Math.max(this.min, this.max);\n  }\n\n  private onInput(event: InputEvent) {\n    event.stopPropagation();\n    const value = parseInt(this.slider.value);\n\n    if (!isNaN(value)) {\n      this.rangeInput = value;\n      this.emitInputEvent();\n    }\n  }\n\n  private emitInputEvent() {\n    this.valueChange.emit(this.rangeInput);\n  }\n\n  private isMarkerActive(markerValue: number) {\n    const start = Math.min(this.traceReference, this.rangeInput);\n    const end = Math.max(this.traceReference, this.rangeInput);\n    const value = markerValue;\n\n    return value >= start && value <= end;\n  }\n\n  // Listen globally on window because sometimes the event listener\n  // of the DOM element input itself is not called if the release\n  // click is not inside the element anymore\n  @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n  onPointerUp() {\n    this.showTooltip = false;\n  }\n\n  render() {\n    const range = this.rangeMax - this.rangeMin;\n\n    let traceReferenceInPercentage =\n      (this.rangeTraceReference - this.rangeMin) / range;\n\n    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n    const distance = valueInPercentage - traceReferenceInPercentage;\n\n    let traceStart = traceReferenceInPercentage;\n    let traceEnd = valueInPercentage;\n\n    if (distance <= 0) {\n      traceStart = valueInPercentage;\n      traceEnd = traceReferenceInPercentage;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          error: !!this.error,\n        }}\n        onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n      >\n        <div class=\"slider\">\n          <div class=\"track\">\n            <div\n              class=\"thumb\"\n              style={{\n                left: `calc(${valueInPercentage} * 100% - 8px)`,\n              }}\n            ></div>\n            <div class=\"ticks\">\n              {this.marker\n                ? this.marker.map((markerValue) => {\n                    if (markerValue > this.max || markerValue < this.min) {\n                      return;\n                    }\n\n                    let left = (markerValue - this.rangeMin) / range;\n\n                    return (\n                      <div\n                        class={{\n                          tick: true,\n                          'tick-active':\n                            this.isMarkerActive(markerValue) && this.trace,\n                        }}\n                        style={{\n                          '--tick-value': `${left}`,\n                        }}\n                      ></div>\n                    );\n                  })\n                : null}\n            </div>\n          </div>\n\n          <input\n            id=\"slider\"\n            type=\"range\"\n            list={this.marker ? 'markers' : undefined}\n            step={this.step}\n            min={this.min}\n            max={this.max}\n            value={this.rangeInput}\n            tabindex={this.disabled ? -1 : 0}\n            onInput={(event) => this.onInput(event)}\n            style={{\n              '--value': `${valueInPercentage}`,\n              '--trace-reference': `${traceReferenceInPercentage}`,\n              '--trace-start': `${traceStart}`,\n              '--trace-end': `${traceEnd}`,\n            }}\n            class={{\n              trace:\n                this.trace && traceReferenceInPercentage !== valueInPercentage,\n              'hide-trace-reference':\n                this.trace &&\n                (this.traceReference <= this.min ||\n                  this.traceReference >= this.max),\n            }}\n            onFocus={() => {\n              this.showTooltip = true;\n            }}\n            onBlur={() => {\n              this.showTooltip = false;\n            }}\n            role=\"slider\"\n            aria-valuenow={this.rangeInput}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            {...this.a11yAttributes}\n          />\n\n          <ix-tooltip\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n          >\n            {this.rangeInput}\n          </ix-tooltip>\n        </div>\n        <div class=\"label\">\n          <div class=\"label-start\">\n            <slot name=\"label-start\"></slot>\n          </div>\n          <div class=\"label-end\">\n            <slot name=\"label-end\"></slot>\n          </div>\n        </div>\n        {this.error ? (\n          <ix-typography class={'label-error'} color=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-112069ca.entry.js → p-dbe8f5e6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as r,H as o,g as a}from"./p-f87cd962.js";const i='@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 s=i;const c=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.counter=undefined;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:"926d3579090f1be086eb75bdbc42865af3c51836",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=>{const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"fedfa30ba5108be5a8b0c0078a9512acab21f067",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"e1ff1b021041a04689c8ae1b1b54894f51fda854"})),r("div",{key:"8cd112dcb4dcd0513603bf4623a58bb9740d6b32",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};c.style=s;const l=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const n=":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 h=n;const d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true};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}get arrowLeftElement(){return this.hostElement.shadowRoot.querySelector("[data-arrow-left]")}get arrowRightElement(){return this.hostElement.shadowRoot.querySelector("[data-arrow-right]")}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(){return this.hostElement.shadowRoot.querySelector(".items-content")}showArrows(){try{const t=this.getTabsWrapper();return t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();const e=t.getBoundingClientRect();return this.showArrows()&&this.scrollActionAmount>(t.scrollWidth-e.width)*-1}catch(t){return false}}getArrowStyle(t){return{opacity:t?"1":"0",zIndex:t?"1":"-1"}}move(t,e=false){const r=this.getTabsWrapper();const o=(r.scrollWidth-r.getBoundingClientRect().width)*-1;t=this.currentScrollAmount+t;t=t>0?0:t<o?o:t;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}moveTabToView(t){if(!this.showArrows())return;const e=this.getTab(t).getBoundingClientRect();const r=e.x*-1;this.move(r,true)}setSelected(t){this.selected=t}clickTab(t){if(this.dragStop()){return}const{defaultPrevented:e}=this.selectedChange.emit(t);if(e){return}this.setSelected(t);this.moveTabToView(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 a=t=>this.dragMove(t,r,o);window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a,false);this.dragStop()}));window.addEventListener("mousemove",a,false)}dragMove(t,e,r){this.move(t.clientX+e-r)}dragStop(){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)}))}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.map(((t,e)=>{t.setAttribute("selected",e===this.selected?"true":"false")}))}componentWillRender(){l((()=>{const t=this.showNextArrow();const e=this.showPreviousArrow();Object.assign(this.arrowLeftElement.style,this.getArrowStyle(e));Object.assign(this.arrowRightElement.style,this.getArrowStyle(t))}))}componentDidLoad(){const t=this.getTabs();t.forEach((t=>{t.addEventListener("mousedown",(e=>this.dragStart(t,e)))}))}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:"a851dd22c0036611316b4c86dee7683c2cf13367"},r("div",{key:"3cdc8ce203a7fdcb431bc8514e97e1dc99ccf42f",class:"arrow","data-arrow-left":true,onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"a9a56482c144ccdfdbcb037ef4a1f3ba87907f59",name:"chevron-left-small"})),r("div",{key:"c94814d93009f941f491ee27aab2d1f0a58641ef",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showPreviousArrow(),"shadow-right":this.showNextArrow(),"shadow-both":this.showNextArrow()&&this.showPreviousArrow()}},r("div",{key:"e3b6d3d72736895e294b284e57ded8d225376405",class:"items-content"},r("slot",{key:"66fad8fbd1c2c599e3614377d0ef917b11653a2c"}))),r("div",{key:"27512bc8fb342ac6247dd69261bdbdab2a8d42dc",class:"arrow right","data-arrow-right":true,onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"99ab01071111e8fca336712967e7e2c0a8643450",name:"chevron-right-small"})))}get hostElement(){return a(this)}};d.style=h;export{c as ix_tab_item,d as ix_tabs};
-//# sourceMappingURL=p-112069ca.entry.js.map
+import{r as t,c as e,h as r,H as o,g as a}from"./p-f87cd962.js";const i='@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 s=i;const c=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.counter=undefined;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:"d066fe09ebb7ac33ef162eafed96189de7215022",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=>{const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"944c3beb003abae7f64ed18c3d77fa8d3a576be3",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"ff6b883c8b1ec2e53fe9faa705bbcdb0345ef27b"})),r("div",{key:"292419b01ae7e18db509ad09a83ffa5bbc6480a5",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};c.style=s;const l=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const n=":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 h=n;const d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true};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}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 a=-this.currentScrollAmount+o-r.scrollWidth;t=t<a?a:t;t+=this.currentScrollAmount;t=Math.min(t,0);const i=[`transform: translateX(${t}px);`,e?"transition: all ease-in-out 400ms;":""].join("");r.setAttribute("style",i);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 a=32;if(r.left<a){this.move(-r.left+a,true)}else if(o&&r.right>o-a){this.move(o-r.right-a,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 a=t=>this.dragMove(t,r,o);const i=()=>{window.removeEventListener("mousemove",a,false);window.removeEventListener("click",i,false);this.dragStop()};window.addEventListener("click",i);window.addEventListener("mousemove",a,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(){l((()=>{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:"014b3afcc4165f3c3aa0800ea6f12c15d138b48b"},this.showArrowPrevious&&r("div",{key:"6c98e2c2957c96970d42d5abdf959f325e1c05b8",class:"arrow",onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"55f46b38e62a863415fa5d51da48a1be19303b78",name:"chevron-left-small"})),r("div",{key:"c0528e9e703746cc1acc63c1b68c4d9ee3a01a04",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showArrowPrevious,"shadow-right":this.showArrowNext,"shadow-both":this.showArrowNext&&this.showArrowPrevious}},r("div",{key:"bb6174f8e9a9543ee928a70de23500edbedaeb04",class:"items-content"},r("slot",{key:"ba881f7c4784685ebdb1f0a2581c4691f2a8f1b9"}))),this.showArrowNext&&r("div",{key:"743123a5b14ed6a473c21b742f54cbf4ae4405da",class:"arrow right",onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"d67ab90bf1b620791ca9e84f7ace8b7a04a7a772",name:"chevron-right-small"})))}get hostElement(){return a(this)}static get watchers(){return{selected:["onSelectedChange"]}}};d.style=h;export{c as ix_tab_item,d as ix_tabs};
+//# sourceMappingURL=p-dbe8f5e6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tabItemCss","IxTabItemStyle0","TabItem","tabItemClasses","props","selected","disabled","small","icon","stretched","layout","bottom","placement","top","circle","render","h","Host","key","class","this","rounded","tabIndex","onClick","event","clientEvent","tabClick","emit","nativeEvent","defaultPrevented","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","IxTabsStyle0","Tabs","windowStartSize","window","innerWidth","clickAction","timeout","isClick","onWindowResize","totalItems","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","scrollActionAmount","showNextArrow","tabWrapperRect","amount","click","tabsWrapper","tabsWrapperVisibleWidth","maxScrollWidth","currentScrollAmount","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","showArrowNext","showArrowPrevious","componentDidLoad","forEach","disconnectedCallback","disconnect","onTabClick","target","tab","scrollAmount","name"],"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          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: 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  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: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\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={'chevron-left-small'}></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={'chevron-right-small'}></ix-icon>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-ae7a7af4.entry.js → p-dde7eb80.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as o,g as a}from"./p-f87cd962.js";import{u as i,A as r}from"./p-7c36d3fa.js";import{a as s}from"./p-702f9349.js";import{m as n}from"./p-c146af8e.js";import"./p-c4749812.js";import"./p-68a274e7.js";const h=":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";const c=h;const l=class{constructor(e){t(this,e);this.applicationName=undefined;this.hideHeader=false;this.forceBreakpoint=undefined;this.breakpoints=["sm","md","lg"];this.breakpoint="lg"}onHideHeaderChange(){var t;(t=this.contextProvider)===null||t===void 0?void 0:t.emit({hideHeader:this.hideHeader,host:"basic-navigation"});this.breakpoint=s.breakpoint}forceLayoutChange(t){if(!t){s.enableBreakpointDetection();return}s.disableBreakpointDetection();s.setBreakpoint(t)}onBreakpointsChange(t){s.setBreakpoints(t)}get menu(){return this.hostElement.querySelector("ix-menu")}onContentClick(){var t;if(n.isPinned){return}(t=this.menu)===null||t===void 0?void 0:t.toggleMenu(false)}componentWillLoad(){s.setBreakpoints(this.breakpoints);this.contextProvider=i(this.hostElement,r,{hideHeader:this.hideHeader,host:"basic-navigation"});this.modeDisposable=s.onChange.on((t=>{this.breakpoint=t}));this.breakpoint=s.breakpoint;if(this.forceBreakpoint){this.forceLayoutChange(this.forceBreakpoint)}}componentDidRender(){if(this.menu){this.menu.applicationName=this.applicationName}}disconnectedCallback(){var t;(t=this.modeDisposable)===null||t===void 0?void 0:t.dispose()}render(){return e(o,{key:"f7c1e352f7b85360afaa4aa7302394fbcefaa33a","data-role":"",class:{"hide-header":this.hideHeader,[`breakpoint-${this.breakpoint}`]:true}},!this.hideHeader?e("ix-application-header",{name:this.applicationName},e("slot",{name:"logo",slot:"logo"})):null,e("div",{key:"bbd969c401308a804a6b8973a038daca551fc8c4",class:"navigation-content"},e("slot",{key:"3b09f85c77fda585b91786049d590e94c6bc3717",name:"menu"}),e("div",{key:"05b1eb22f097cf421f0ed0c747364c5b33418190",class:"content",onClick:()=>this.onContentClick()},e("slot",{key:"e46d1d8ddc56270570e28ea814087506202e7217"}))))}get hostElement(){return a(this)}static get watchers(){return{hideHeader:["onHideHeaderChange"],breakpoints:["onBreakpointsChange"]}}};l.style=c;export{l as ix_basic_navigation};
-//# sourceMappingURL=p-ae7a7af4.entry.js.map
+import{r as t,h as e,H as o,g as a}from"./p-f87cd962.js";import{u as i,A as r}from"./p-7c36d3fa.js";import{a as s}from"./p-fbe017b7.js";import{m as n}from"./p-c146af8e.js";import"./p-c4749812.js";import"./p-68a274e7.js";const h=":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";const c=h;const l=class{constructor(e){t(this,e);this.applicationName=undefined;this.hideHeader=false;this.forceBreakpoint=undefined;this.breakpoints=["sm","md","lg"];this.breakpoint="lg"}onHideHeaderChange(){var t;(t=this.contextProvider)===null||t===void 0?void 0:t.emit({hideHeader:this.hideHeader,host:"basic-navigation"});this.breakpoint=s.breakpoint}forceLayoutChange(t){if(!t){s.enableBreakpointDetection();return}s.disableBreakpointDetection();s.setBreakpoint(t)}onBreakpointsChange(t){s.setBreakpoints(t)}get menu(){return this.hostElement.querySelector("ix-menu")}onContentClick(){var t;if(n.isPinned){return}(t=this.menu)===null||t===void 0?void 0:t.toggleMenu(false)}componentWillLoad(){s.setBreakpoints(this.breakpoints);this.contextProvider=i(this.hostElement,r,{hideHeader:this.hideHeader,host:"basic-navigation"});this.modeDisposable=s.onChange.on((t=>{this.breakpoint=t}));this.breakpoint=s.breakpoint;if(this.forceBreakpoint){this.forceLayoutChange(this.forceBreakpoint)}}componentDidRender(){if(this.menu){this.menu.applicationName=this.applicationName}}disconnectedCallback(){var t;(t=this.modeDisposable)===null||t===void 0?void 0:t.dispose()}render(){return e(o,{key:"f7c1e352f7b85360afaa4aa7302394fbcefaa33a","data-role":"",class:{"hide-header":this.hideHeader,[`breakpoint-${this.breakpoint}`]:true}},!this.hideHeader?e("ix-application-header",{name:this.applicationName},e("slot",{name:"logo",slot:"logo"})):null,e("div",{key:"bbd969c401308a804a6b8973a038daca551fc8c4",class:"navigation-content"},e("slot",{key:"3b09f85c77fda585b91786049d590e94c6bc3717",name:"menu"}),e("div",{key:"05b1eb22f097cf421f0ed0c747364c5b33418190",class:"content",onClick:()=>this.onContentClick()},e("slot",{key:"e46d1d8ddc56270570e28ea814087506202e7217"}))))}get hostElement(){return a(this)}static get watchers(){return{hideHeader:["onHideHeaderChange"],breakpoints:["onBreakpointsChange"]}}};l.style=c;export{l as ix_basic_navigation};
+//# sourceMappingURL=p-dde7eb80.entry.js.map

package/dist/siemens-ix/{p-4344ba99.entry.js → p-f318140c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,H as e,g as r}from"./p-f87cd962.js";import{f as h,i as n,s as o,o as a,a as d,c}from"./p-b3f35666.js";import{A as l}from"./p-c09553f3.js";function u(t){return t&&t.getDropdownItemElement!==undefined&&typeof t.getDropdownItemElement==="function"}class f{constructor(){this.dropdowns=new Map;this.submenuIds={};this.isWindowListenerActive=false}connected(t){if(!this.isWindowListenerActive){this.addOverlayListeners()}this.dropdowns.set(t.getId(),t);if(t.discoverAllSubmenus){this.discoverSubmenus()}}disconnected(t){this.dropdowns.delete(t.getId())}discoverSubmenus(){this.dropdowns.forEach((t=>{t.discoverSubmenu()}))}present(t){if(!t.isPresent()&&t.willPresent()){this.submenuIds[t.getId()]=t.getAssignedSubmenuIds();t.present()}}dismissChildren(t){const i=this.submenuIds[t]||[];for(const t of i){this.dismiss(this.dropdowns.get(t))}}dismiss(t){if(t.isPresent()&&t.willDismiss()){this.dismissChildren(t.getId());t.dismiss();delete this.submenuIds[t.getId()]}}dismissAll(t=[],i=false){this.dropdowns.forEach((s=>{const e=s.closeBehavior==="inside"||s.closeBehavior===false;const r=t.includes(s.getId());const h=this.buildComposedPath(s.getId(),new Set);if(t.length>0&&i){let i=false;t.forEach((t=>{if(h.has(t)){i=true;return}}));if(!i){return}}if(!r&&e){return}this.dismiss(s)}))}dismissOthers(t){let i=this.buildComposedPath(t,new Set);i.add(t);this.dropdowns.forEach((t=>{if(t.closeBehavior!=="inside"&&t.closeBehavior!==false&&!i.has(t.getId())){this.dismiss(t)}}))}pathIncludesTrigger(t){for(let i of t){if(i instanceof HTMLElement){if(i.hasAttribute("data-ix-dropdown-trigger")){return i}}}return}pathIncludesDropdown(t){return!!t.find((t=>t.tagName==="IX-DROPDOWN"))}buildComposedPath(t,i){if(this.submenuIds[t]){i.add(t)}for(const s of Object.keys(this.submenuIds)){if(this.submenuIds[s].includes(t)){this.buildComposedPath(s,i).forEach((t=>i.add(t)))}}return i}addOverlayListeners(){this.isWindowListenerActive=true;window.addEventListener("click",(t=>{const i=this.pathIncludesTrigger(t.composedPath());const s=this.pathIncludesDropdown(t.composedPath());if(!i&&!s){this.dismissAll()}}));window.addEventListener("keydown",(t=>{if(t.key==="Escape"){this.dismissAll([...this.dropdowns.keys()])}}))}}const b=(t,i,s)=>{t.addEventListener(i,s);return()=>{t.removeEventListener(i,s)}};const m=new f;const w=":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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 .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";const p=w;let g=0;const v=class{constructor(s){t(this,s);this.showChanged=i(this,"showChanged",7);this.autoUpdateCleanup=null;this.localUId=`dropdown-${g++}`;this.assignedSubmenu=[];this.focusDropdownItemBind=this.focusDropdownItem.bind(this);this.itemObserver=new MutationObserver((()=>{this.arrowFocusController.items=this.dropdownItems}));this.suppressAutomaticPlacement=false;this.show=false;this.trigger=undefined;this.anchor=undefined;this.closeBehavior="both";this.placement="bottom-start";this.positioningStrategy="fixed";this.header=undefined;this.offset=undefined;this.overwriteDropdownStyle=undefined;this.discoverAllSubmenus=false;this.ignoreRelatedSubmenu=false}connectedCallback(){m.connected(this);if(this.trigger!=undefined){this.registerListener(this.trigger)}}cacheSubmenuId(t){t.stopImmediatePropagation();t.preventDefault();const{detail:i}=t;if(this.assignedSubmenu.indexOf(i)===-1){this.assignedSubmenu.push(i)}}disconnectedCallback(){m.dismiss(this);m.disconnected(this);if(this.disposeClickListener){this.disposeClickListener()}if(this.disposeKeyListener){this.disposeKeyListener()}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}}getAssignedSubmenuIds(){return this.assignedSubmenu}isPresent(){return this.show}present(){this.show=true}dismiss(){this.show=false}getId(){return this.localUId}willDismiss(){const{defaultPrevented:t}=this.showChanged.emit(false);return!t}willPresent(){const{defaultPrevented:t}=this.showChanged.emit(true);return!t}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"))}get slotElement(){return this.hostElement.shadowRoot.querySelector("slot")}addEventListenersFor(){var t,i,s;(t=this.disposeClickListener)===null||t===void 0?void 0:t.call(this);(i=this.disposeKeyListener)===null||i===void 0?void 0:i.call(this);const e=()=>{if(!this.isPresent()){m.present(this)}else{m.dismiss(this)}m.dismissOthers(this.getId())};this.disposeClickListener=b(this.triggerElement,"click",(t=>{if(!t.defaultPrevented){e()}}));(s=this.triggerElement)===null||s===void 0?void 0:s.setAttribute("data-ix-dropdown-trigger",this.localUId)}async discoverSubmenu(){var t;(t=this.triggerElement)===null||t===void 0?void 0:t.dispatchEvent(new CustomEvent("ix-assign-sub-menu",{bubbles:true,composed:true,cancelable:true,detail:this.localUId}))}registerKeyListener(){if(!this.triggerElement){return}this.disposeKeyListener=b(this.triggerElement,"keydown",(t=>{if(t.key!=="ArrowDown"){return}if(document.activeElement!==this.triggerElement){return}m.present(this);setTimeout((()=>{this.focusDropdownItem(0)}))}))}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){this.addEventListenersFor();this.discoverSubmenu()}}async resolveElement(t){const i=await this.findElement(t);return this.checkForSubmenuAnchor(i)}async checkForSubmenuAnchor(t){if(!t){return null}if(u(t)){const i=await t.getDropdownItemElement();i.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}if(t.tagName==="IX-DROPDOWN-ITEM"){t.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}return t}findElement(t){if(t instanceof Promise){return t}if(typeof t==="object"){return Promise.resolve(t)}if(typeof t!="string"){return}const i=`#${t}`;return new Promise((t=>{if(document.querySelector(i)){return t(document.querySelector(i))}const s=new MutationObserver((()=>{if(document.querySelector(i)){t(document.querySelector(i));s.disconnect()}}));s.observe(document.body,{childList:true,subtree:true})}))}async changedShow(t){var i,s;if(t){this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.anchorElement){this.applyDropdownPosition()}this.arrowFocusController=new l(this.dropdownItems,this.dropdownRef,this.focusDropdownItemBind);this.itemObserver.observe(this.dropdownRef,{childList:true,subtree:true});this.registerKeyListener()}else{(i=this.arrowFocusController)===null||i===void 0?void 0:i.disconnect();this.itemObserver.disconnect();(s=this.disposeKeyListener)===null||s===void 0?void 0:s.call(this)}}changedTrigger(t){this.registerListener(t)}isAnchorSubmenu(){var t;if(!u(this.anchorElement)){return!!((t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item"))}return true}async applyDropdownPosition(){if(!this.show){return}if(!this.anchorElement){return}if(!this.dropdownRef){return}const t=this.isAnchorSubmenu();let i={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){i.middleware.push(h({fallbackStrategy:"initialPlacement"}))}i.placement=t?"right-start":this.placement;i.middleware=[...i.middleware,n(),o()];if(this.offset){i.middleware.push(a(this.offset))}if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=null}this.autoUpdateCleanup=d(this.anchorElement,this.dropdownRef,(async()=>{const t=await c(this.anchorElement,this.dropdownRef,i);Object.assign(this.dropdownRef.style,{top:"0",left:"0",transform:`translate(${Math.round(t.x)}px,${Math.round(t.y)}px)`});if(this.overwriteDropdownStyle){const t=await this.overwriteDropdownStyle({dropdownRef:this.dropdownRef,triggerRef:this.triggerElement});Object.assign(this.dropdownRef.style,t)}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}focusDropdownItem(t){requestAnimationFrame((()=>{var i;(i=this.dropdownItems[t])===null||i===void 0?void 0:i.shadowRoot.querySelector("button").focus()}))}async componentDidLoad(){this.changedTrigger(this.trigger)}async componentDidRender(){await this.applyDropdownPosition();this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger))}isTriggerElement(t){const i=!!t.hasAttribute("data-ix-dropdown-trigger");return i}onDropdownClick(t){const i=m.pathIncludesTrigger(t.composedPath());if(i){if(i!==this.triggerElement){t.preventDefault()}if(this.isTriggerElement(i)){if(this.closeBehavior==="outside"){t.preventDefault()}return}}if(!t.defaultPrevented&&(this.closeBehavior==="inside"||this.closeBehavior==="both")){m.dismissAll([this.getId()],this.ignoreRelatedSubmenu);return}m.dismissOthers(this.getId())}async updatePosition(){this.applyDropdownPosition()}render(){return s(e,{key:"4f50f3c00bce087ae0c36c463f49c29adfe20f78","data-ix-dropdown":this.localUId,ref:t=>this.dropdownRef=t,class:{"dropdown-menu":true,show:this.show,overflow:true},style:{margin:"0",minWidth:"0px",position:this.positioningStrategy},role:"list",onClick:t=>this.onDropdownClick(t)},s("div",{key:"be529e836ffcf39ed344416cb41d1cc45a0d9abb",style:{display:"contents"}},this.header&&s("div",{key:"af768a37fd188144b84836abc87b3fd06f0b4808",class:"dropdown-header"},this.header),s("slot",{key:"2b4e76a579c4cadb18e3ce7baa1f83c942e2d28f"})))}get hostElement(){return r(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};v.style=p;export{v as ix_dropdown};
-//# sourceMappingURL=p-4344ba99.entry.js.map
+import{r as t,c as i,h as s,H as e,g as r}from"./p-f87cd962.js";import{f as h,i as o,s as n,o as a,a as d,c}from"./p-b3f35666.js";import{A as l}from"./p-c09553f3.js";function u(t){return t&&t.getDropdownItemElement!==undefined&&typeof t.getDropdownItemElement==="function"}class f{constructor(){this.dropdowns=new Map;this.submenuIds={};this.isWindowListenerActive=false}connected(t){if(!this.isWindowListenerActive){this.addOverlayListeners()}this.dropdowns.set(t.getId(),t);if(t.discoverAllSubmenus){this.discoverSubmenus()}}disconnected(t){this.dropdowns.delete(t.getId())}discoverSubmenus(){this.dropdowns.forEach((t=>{t.discoverSubmenu()}))}present(t){if(!t.isPresent()&&t.willPresent()){this.submenuIds[t.getId()]=t.getAssignedSubmenuIds();t.present()}}dismissChildren(t){const i=this.submenuIds[t]||[];for(const t of i){this.dismiss(this.dropdowns.get(t))}}dismiss(t){if(t.isPresent()&&t.willDismiss()){this.dismissChildren(t.getId());t.dismiss();delete this.submenuIds[t.getId()]}}dismissAll(t=[],i=false){this.dropdowns.forEach((s=>{const e=s.closeBehavior==="inside"||s.closeBehavior===false;const r=t.includes(s.getId());const h=this.buildComposedPath(s.getId(),new Set);if(t.length>0&&i){let i=false;t.forEach((t=>{if(h.has(t)){i=true;return}}));if(!i){return}}if(!r&&e){return}this.dismiss(s)}))}dismissOthers(t){let i=this.buildComposedPath(t,new Set);i.add(t);this.dropdowns.forEach((t=>{if(t.closeBehavior!=="inside"&&t.closeBehavior!==false&&!i.has(t.getId())){this.dismiss(t)}}))}pathIncludesTrigger(t){for(let i of t){if(i instanceof HTMLElement){if(i.hasAttribute("data-ix-dropdown-trigger")){return i}}}return}pathIncludesDropdown(t){return!!t.find((t=>t.tagName==="IX-DROPDOWN"))}buildComposedPath(t,i){if(this.submenuIds[t]){i.add(t)}for(const s of Object.keys(this.submenuIds)){if(this.submenuIds[s].includes(t)){this.buildComposedPath(s,i).forEach((t=>i.add(t)))}}return i}addOverlayListeners(){this.isWindowListenerActive=true;window.addEventListener("click",(t=>{const i=this.pathIncludesTrigger(t.composedPath());const s=this.pathIncludesDropdown(t.composedPath());if(!i&&!s){this.dismissAll()}}));window.addEventListener("keydown",(t=>{if(t.key==="Escape"){this.dismissAll([...this.dropdowns.keys()])}}))}}const b=(t,i,s)=>{t.addEventListener(i,s);return()=>{t.removeEventListener(i,s)}};const m=new f;const w=":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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 .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";const p=w;let g=0;const v=class{constructor(s){t(this,s);this.showChanged=i(this,"showChanged",7);this.autoUpdateCleanup=null;this.localUId=`dropdown-${g++}`;this.assignedSubmenu=[];this.focusDropdownItemBind=this.focusDropdownItem.bind(this);this.itemObserver=new MutationObserver((()=>{this.arrowFocusController.items=this.dropdownItems}));this.suppressAutomaticPlacement=false;this.show=false;this.trigger=undefined;this.anchor=undefined;this.closeBehavior="both";this.placement="bottom-start";this.positioningStrategy="fixed";this.header=undefined;this.offset=undefined;this.overwriteDropdownStyle=undefined;this.discoverAllSubmenus=false;this.ignoreRelatedSubmenu=false}connectedCallback(){m.connected(this);if(this.trigger!=undefined){this.registerListener(this.trigger)}}cacheSubmenuId(t){t.stopImmediatePropagation();t.preventDefault();const{detail:i}=t;if(this.assignedSubmenu.indexOf(i)===-1){this.assignedSubmenu.push(i)}}disconnectedCallback(){m.dismiss(this);m.disconnected(this);if(this.disposeClickListener){this.disposeClickListener()}if(this.disposeKeyListener){this.disposeKeyListener()}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}}getAssignedSubmenuIds(){return this.assignedSubmenu}isPresent(){return this.show}present(){this.show=true}dismiss(){this.show=false}getId(){return this.localUId}willDismiss(){const{defaultPrevented:t}=this.showChanged.emit(false);return!t}willPresent(){const{defaultPrevented:t}=this.showChanged.emit(true);return!t}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"))}get slotElement(){return this.hostElement.shadowRoot.querySelector("slot")}addEventListenersFor(){var t,i,s;(t=this.disposeClickListener)===null||t===void 0?void 0:t.call(this);(i=this.disposeKeyListener)===null||i===void 0?void 0:i.call(this);const e=()=>{if(!this.isPresent()){m.present(this)}else{m.dismiss(this)}m.dismissOthers(this.getId())};this.disposeClickListener=b(this.triggerElement,"click",(t=>{if(!t.defaultPrevented){e()}}));(s=this.triggerElement)===null||s===void 0?void 0:s.setAttribute("data-ix-dropdown-trigger",this.localUId)}async discoverSubmenu(){var t;(t=this.triggerElement)===null||t===void 0?void 0:t.dispatchEvent(new CustomEvent("ix-assign-sub-menu",{bubbles:true,composed:true,cancelable:true,detail:this.localUId}))}registerKeyListener(){if(!this.triggerElement){return}this.disposeKeyListener=b(this.triggerElement,"keydown",(t=>{if(t.key!=="ArrowDown"){return}if(document.activeElement!==this.triggerElement){return}m.present(this);setTimeout((()=>{this.focusDropdownItem(0)}))}))}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){this.addEventListenersFor();this.discoverSubmenu()}}async resolveElement(t){const i=await this.findElement(t);return this.checkForSubmenuAnchor(i)}async checkForSubmenuAnchor(t){if(!t){return null}if(u(t)){const i=await t.getDropdownItemElement();i.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}if(t.tagName==="IX-DROPDOWN-ITEM"){t.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}return t}findElement(t){if(t instanceof Promise){return t}if(typeof t==="object"){return Promise.resolve(t)}if(typeof t!="string"){return}const i=`#${t}`;return new Promise((t=>{if(document.querySelector(i)){return t(document.querySelector(i))}const s=new MutationObserver((()=>{if(document.querySelector(i)){t(document.querySelector(i));s.disconnect()}}));s.observe(document.body,{childList:true,subtree:true})}))}async changedShow(t){var i,s;if(t){this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.anchorElement){this.applyDropdownPosition()}this.arrowFocusController=new l(this.dropdownItems,this.dropdownRef,this.focusDropdownItemBind);this.itemObserver.observe(this.dropdownRef,{childList:true,subtree:true});this.registerKeyListener()}else{this.destroyAutoUpdate();(i=this.arrowFocusController)===null||i===void 0?void 0:i.disconnect();this.itemObserver.disconnect();(s=this.disposeKeyListener)===null||s===void 0?void 0:s.call(this)}}changedTrigger(t){this.registerListener(t)}destroyAutoUpdate(){if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=null}}isAnchorSubmenu(){var t;if(!u(this.anchorElement)){return!!((t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item"))}return true}async applyDropdownPosition(){if(!this.show){return}if(!this.anchorElement){return}if(!this.dropdownRef){return}const t=this.isAnchorSubmenu();let i={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){i.middleware.push(h({fallbackStrategy:"initialPlacement"}))}i.placement=t?"right-start":this.placement;i.middleware=[...i.middleware,o(),n()];if(this.offset){i.middleware.push(a(this.offset))}this.destroyAutoUpdate();this.autoUpdateCleanup=d(this.anchorElement,this.dropdownRef,(async()=>{const t=await c(this.anchorElement,this.dropdownRef,i);Object.assign(this.dropdownRef.style,{top:"0",left:"0",transform:`translate(${Math.round(t.x)}px,${Math.round(t.y)}px)`});if(this.overwriteDropdownStyle){const t=await this.overwriteDropdownStyle({dropdownRef:this.dropdownRef,triggerRef:this.triggerElement});Object.assign(this.dropdownRef.style,t)}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}focusDropdownItem(t){requestAnimationFrame((()=>{var i;(i=this.dropdownItems[t])===null||i===void 0?void 0:i.shadowRoot.querySelector("button").focus()}))}async componentDidLoad(){this.changedTrigger(this.trigger)}async componentDidRender(){await this.applyDropdownPosition();this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger))}isTriggerElement(t){const i=!!t.hasAttribute("data-ix-dropdown-trigger");return i}onDropdownClick(t){const i=m.pathIncludesTrigger(t.composedPath());if(i){if(i!==this.triggerElement){t.preventDefault()}if(this.isTriggerElement(i)){if(this.closeBehavior==="outside"){t.preventDefault()}return}}if(!t.defaultPrevented&&(this.closeBehavior==="inside"||this.closeBehavior==="both")){m.dismissAll([this.getId()],this.ignoreRelatedSubmenu);return}m.dismissOthers(this.getId())}async updatePosition(){this.applyDropdownPosition()}render(){return s(e,{key:"1b165268d8ee5fa5f18bca276b0541da36bd3130","data-ix-dropdown":this.localUId,ref:t=>this.dropdownRef=t,class:{"dropdown-menu":true,show:this.show,overflow:true},style:{margin:"0",minWidth:"0px",position:this.positioningStrategy},role:"list",onClick:t=>this.onDropdownClick(t)},s("div",{key:"cdecec289e6c242a31b6160e93cb63b80bf5e535",style:{display:"contents"}},this.header&&s("div",{key:"27b86587be67c8086480ecec8059f8d6ae8aa5b7",class:"dropdown-header"},this.header),this.show&&s("slot",{key:"32d6960a187e91492e24fa7ee0d9407df1209829"})))}get hostElement(){return r(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};v.style=p;export{v as ix_dropdown};
+//# sourceMappingURL=p-f318140c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["hasDropdownItemWrapperImplemented","item","getDropdownItemElement","undefined","DropdownController","constructor","this","dropdowns","Map","submenuIds","isWindowListenerActive","connected","dropdown","addOverlayListeners","set","getId","discoverAllSubmenus","discoverSubmenus","disconnected","delete","forEach","discoverSubmenu","present","isPresent","willPresent","getAssignedSubmenuIds","dismissChildren","uid","childIds","id","dismiss","get","willDismiss","dismissAll","ignoreBehaviorForIds","ignoreRelatedDropdowns","preventClosing","closeBehavior","shouldIgnore","includes","path","buildComposedPath","Set","length","skipRelatedDropdown","has","dismissOthers","add","pathIncludesTrigger","eventTargets","eventTarget","HTMLElement","hasAttribute","pathIncludesDropdown","find","element","tagName","ruleKey","Object","keys","key","window","addEventListener","event","hasTrigger","composedPath","hasDropdown","addDisposableEventListener","eventType","callback","removeEventListener","dropdownController","dropdownCss","IxDropdownStyle0","sequenceId","Dropdown","autoUpdateCleanup","localUId","assignedSubmenu","focusDropdownItemBind","focusDropdownItem","bind","itemObserver","MutationObserver","arrowFocusController","items","dropdownItems","connectedCallback","trigger","registerListener","cacheSubmenuId","stopImmediatePropagation","preventDefault","detail","indexOf","push","disconnectedCallback","disposeClickListener","disposeKeyListener","show","defaultPrevented","showChanged","emit","Array","from","hostElement","querySelectorAll","slotElement","shadowRoot","querySelector","addEventListenersFor","_a","call","_b","toggleController","triggerElement","_c","setAttribute","dispatchEvent","CustomEvent","bubbles","composed","cancelable","registerKeyListener","document","activeElement","setTimeout","resolveElement","el","findElement","checkForSubmenuAnchor","dropdownItem","isSubMenu","style","zIndex","Promise","resolve","selector","observer","disconnect","observe","body","childList","subtree","changedShow","newShow","anchorElement","anchor","applyDropdownPosition","ArrowFocusController","dropdownRef","destroyAutoUpdate","changedTrigger","newTriggerValue","isAnchorSubmenu","closest","isSubmenu","positionConfig","strategy","positioningStrategy","middleware","suppressAutomaticPlacement","flip","fallbackStrategy","placement","inline","shift","offset","autoUpdate","async","computeResponse","computePosition","assign","top","left","transform","Math","round","x","y","overwriteDropdownStyle","overwriteStyle","triggerRef","ancestorResize","ancestorScroll","elementResize","index","requestAnimationFrame","focus","componentDidLoad","componentDidRender","isTriggerElement","onDropdownClick","target","ignoreRelatedSubmenu","updatePosition","render","h","Host","ref","class","overflow","margin","minWidth","position","role","onClick","display","header"],"sources":["src/components/dropdown/dropdown-controller.ts","src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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\nimport { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    item &&\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    this.dropdowns.delete(dropdown.getId());\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      this.dismiss(this.dropdowns.get(id));\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(\n    ignoreBehaviorForIds: string[] = [],\n    ignoreRelatedDropdowns = false\n  ) {\n    this.dropdowns.forEach((dropdown) => {\n      const preventClosing =\n        dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;\n\n      const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());\n      const path = this.buildComposedPath(dropdown.getId(), new Set<string>());\n\n      if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {\n        let skipRelatedDropdown = false;\n\n        ignoreBehaviorForIds.forEach((id) => {\n          if (path.has(id)) {\n            skipRelatedDropdown = true;\n            return;\n          }\n        });\n\n        if (!skipRelatedDropdown) {\n          return;\n        }\n      }\n\n      if (!shouldIgnore && preventClosing) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n    path.add(uid);\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    for (let eventTarget of eventTargets) {\n      if (eventTarget instanceof HTMLElement) {\n        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {\n          return eventTarget;\n        }\n      }\n    }\n\n    return;\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: PointerEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const addDisposableEventListener = (\n  element: Element | Window | Document,\n  eventType: string,\n  callback: EventListenerOrEventListenerObject\n) => {\n  element.addEventListener(eventType, callback);\n\n  return () => {\n    element.removeEventListener(eventType, callback);\n  };\n};\n\nexport const addDisposableEventListenerAsArray = (\n  listener: {\n    element: Element | Window | Document;\n    eventType: string;\n    callback: EventListenerOrEventListenerObject;\n  }[]\n) => {\n  const disposables = listener.map(({ callback, element, eventType }) =>\n    addDisposableEventListener(element, eventType, callback)\n  );\n\n  return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\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\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  background-color: var(--theme-color-2);\n  border-radius: var(--theme-default-border-radius);\n  @include ix-component;\n  min-width: 0px;\n  z-index: var(--theme-z-index-dropdown);\n  box-shadow: var(--theme-shadow-4);\n\n  padding: 0.25rem 0px;\n\n  .dropdown-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    color: var(--theme-menu-header--color);\n    padding: 0 $default-space;\n  }\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n\n:host(:not(.show)) {\n  display: none;\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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport { ArrowFocusController } from '../utils/focus';\nimport {\n  addDisposableEventListener,\n  CloseBehavior,\n  dropdownController,\n  DropdownInterface,\n  hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * @internal\n   * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n   * This property indicates the need for that to the controller.\n   */\n  @Prop() discoverAllSubmenus = false;\n\n  /** @internal */\n  @Prop() ignoreRelatedSubmenu = false;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n  private localUId = `dropdown-${sequenceId++}`;\n  private assignedSubmenu: string[] = [];\n\n  private arrowFocusController: ArrowFocusController;\n  private focusDropdownItemBind = this.focusDropdownItem.bind(this);\n\n  private itemObserver = new MutationObserver(() => {\n    this.arrowFocusController.items = this.dropdownItems;\n  });\n\n  connectedCallback(): void {\n    dropdownController.connected(this);\n\n    if (this.trigger != undefined) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  @Listen('ix-assign-sub-menu')\n  cacheSubmenuId(event: CustomEvent<string>) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n\n    const { detail } = event;\n\n    if (this.assignedSubmenu.indexOf(detail) === -1) {\n      this.assignedSubmenu.push(detail);\n    }\n  }\n\n  disconnectedCallback() {\n    dropdownController.dismiss(this);\n    dropdownController.disconnected(this);\n\n    if (this.disposeClickListener) {\n      this.disposeClickListener();\n    }\n\n    if (this.disposeKeyListener) {\n      this.disposeKeyListener();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  getAssignedSubmenuIds() {\n    return this.assignedSubmenu;\n  }\n\n  isPresent() {\n    return this.show;\n  }\n\n  present() {\n    this.show = true;\n  }\n\n  dismiss() {\n    this.show = false;\n  }\n\n  getId() {\n    return this.localUId;\n  }\n\n  willDismiss() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n    return !defaultPrevented;\n  }\n\n  willPresent() {\n    const { defaultPrevented } = this.showChanged.emit(true);\n    return !defaultPrevented;\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private disposeClickListener?: () => void;\n  private disposeKeyListener?: () => void;\n\n  private addEventListenersFor() {\n    this.disposeClickListener?.();\n    this.disposeKeyListener?.();\n\n    const toggleController = () => {\n      if (!this.isPresent()) {\n        dropdownController.present(this);\n      } else {\n        dropdownController.dismiss(this);\n      }\n\n      dropdownController.dismissOthers(this.getId());\n    };\n\n    this.disposeClickListener = addDisposableEventListener(\n      this.triggerElement,\n      'click',\n      (event: PointerEvent) => {\n        if (!event.defaultPrevented) {\n          toggleController();\n        }\n      }\n    );\n\n    this.triggerElement?.setAttribute(\n      'data-ix-dropdown-trigger',\n      this.localUId\n    );\n  }\n\n  /** @internal */\n  @Method()\n  async discoverSubmenu() {\n    this.triggerElement?.dispatchEvent(\n      new CustomEvent('ix-assign-sub-menu', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n        detail: this.localUId,\n      })\n    );\n  }\n\n  private registerKeyListener() {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    this.disposeKeyListener = addDisposableEventListener(\n      this.triggerElement,\n      'keydown',\n      (event: KeyboardEvent) => {\n        if (event.key !== 'ArrowDown') {\n          return;\n        }\n\n        if (document.activeElement !== this.triggerElement) {\n          return;\n        }\n\n        dropdownController.present(this);\n\n        setTimeout(() => {\n          this.focusDropdownItem(0);\n        });\n      }\n    );\n  }\n\n  private async registerListener(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      this.addEventListenersFor();\n      this.discoverSubmenu();\n    }\n  }\n\n  private async resolveElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    const el = await this.findElement(element);\n\n    return this.checkForSubmenuAnchor(el);\n  }\n\n  private async checkForSubmenuAnchor(element: Element) {\n    if (!element) {\n      return null;\n    }\n\n    if (hasDropdownItemWrapperImplemented(element)) {\n      const dropdownItem = await element.getDropdownItemElement();\n      dropdownItem.isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    if (element.tagName === 'IX-DROPDOWN-ITEM') {\n      (element as HTMLIxDropdownItemElement).isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    return element;\n  }\n\n  private findElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ): Promise<Element> {\n    if (element instanceof Promise) {\n      return element;\n    }\n\n    if (typeof element === 'object') {\n      return Promise.resolve(element);\n    }\n\n    if (typeof element != 'string') {\n      return;\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n\n      this.arrowFocusController = new ArrowFocusController(\n        this.dropdownItems,\n        this.dropdownRef,\n        this.focusDropdownItemBind\n      );\n\n      this.itemObserver.observe(this.dropdownRef, {\n        childList: true,\n        subtree: true,\n      });\n\n      this.registerKeyListener();\n    } else {\n      this.destroyAutoUpdate();\n      this.arrowFocusController?.disconnect();\n      this.itemObserver.disconnect();\n      this.disposeKeyListener?.();\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n    this.registerListener(newTriggerValue);\n  }\n\n  private destroyAutoUpdate() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n  }\n\n  private isAnchorSubmenu(): boolean {\n    if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n      // Is no official dropdown-item, but check if any dropdown-item\n      // is placed somewhere up the DOM\n      return !!this.anchorElement?.closest('ix-dropdown-item');\n    }\n\n    return true;\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.show) {\n      return;\n    }\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    this.destroyAutoUpdate();\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private focusDropdownItem(index: number) {\n    requestAnimationFrame(() => {\n      this.dropdownItems[index]?.shadowRoot.querySelector('button').focus();\n    });\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n  }\n\n  private isTriggerElement(element: HTMLElement) {\n    const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n    return trigger;\n  }\n\n  private onDropdownClick(event: PointerEvent) {\n    const target = dropdownController.pathIncludesTrigger(event.composedPath());\n    if (target) {\n      if (target !== this.triggerElement) {\n        event.preventDefault();\n      }\n\n      if (this.isTriggerElement(target)) {\n        if (this.closeBehavior === 'outside') {\n          event.preventDefault();\n        }\n        return;\n      }\n    }\n\n    if (\n      !event.defaultPrevented &&\n      (this.closeBehavior === 'inside' || this.closeBehavior === 'both')\n    ) {\n      dropdownController.dismissAll([this.getId()], this.ignoreRelatedSubmenu);\n      return;\n    }\n\n    dropdownController.dismissOthers(this.getId());\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        data-ix-dropdown={this.localUId}\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n        onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n          {this.show && <slot></slot>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-702f9349.js → p-fbe017b7.js}

@@ -1,2 +1,2 @@
-import{m as e}from"./p-68a274e7.js";import{T as t}from"./p-c4749812.js";function i(e,t){let i;return function r(...n){clearTimeout(i);i=setTimeout((()=>{e(...n)}),t)}}var r=undefined&&undefined.__classPrivateFieldGet||function(e,t,i,r){if(i==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?r:i==="a"?r.call(e):r?r.value:t.get(e)};var n=undefined&&undefined.__classPrivateFieldSet||function(e,t,i,r,n){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?n.call(e,i):n?n.value=i:t.set(e,i),i};var s,o,a,f;class h{constructor(){s.set(this,["sm","md","lg"]);o.set(this,new t);a.set(this,"lg");f.set(this,true);this.debouncedOnResize=i(this.onResize.bind(this),50);if(typeof window!=="undefined"){window.addEventListener("resize",this.debouncedOnResize.bind(this));this.debouncedOnResize()}}get breakpoint(){return r(this,a,"f")}get onChange(){return r(this,o,"f")}get isDetectionEnabled(){return r(this,f,"f")}onResize(){if(!r(this,f,"f")){return}if(!r(this,s,"f")){return}const t=[];const i=r(this,s,"f");i.forEach((i=>{const r=e(i);t.push([i,r])}));if(t.every((([e,t])=>t===false))){let e=0;if(!r(this,s,"f").includes("lg")){e=t.length-1}const[i,f]=t[e];r(this,o,"f").emit(i);n(this,a,i,"f");return}for(const[e,i]of t.reverse()){if(i){r(this,o,"f").emit(e);n(this,a,e,"f");break}}}disableBreakpointDetection(){n(this,f,false,"f")}enableBreakpointDetection(){n(this,f,true,"f")}setBreakpoint(e){n(this,a,e,"f");r(this,o,"f").emit(e)}setBreakpoints(e){n(this,s,e,"f");this.onResize()}}s=new WeakMap,o=new WeakMap,a=new WeakMap,f=new WeakMap;const c=new h;export{c as a};
-//# sourceMappingURL=p-702f9349.js.map
+import{m as e}from"./p-68a274e7.js";import{T as t}from"./p-c4749812.js";function i(e,t){let i;return function r(...n){clearTimeout(i);i=setTimeout((()=>{e(...n)}),t)}}var r=undefined&&undefined.__classPrivateFieldGet||function(e,t,i,r){if(i==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?r:i==="a"?r.call(e):r?r.value:t.get(e)};var n=undefined&&undefined.__classPrivateFieldSet||function(e,t,i,r,n){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?n.call(e,i):n?n.value=i:t.set(e,i),i};var s,o,a,f;class h{constructor(){s.set(this,["sm","md","lg"]);o.set(this,new t);a.set(this,"lg");f.set(this,true);this.debouncedOnResize=i(this.onResize.bind(this),50);if(typeof window!=="undefined"){window.addEventListener("resize",this.debouncedOnResize.bind(this));this.debouncedOnResize()}}get breakpoint(){return r(this,a,"f")}get onChange(){return r(this,o,"f")}get isDetectionEnabled(){return r(this,f,"f")}onResize(){if(!r(this,f,"f")){return}if(!r(this,s,"f")){return}const t=[];const i=r(this,s,"f");i.forEach((i=>{const r=e(i);t.push([i,r])}));if(t.every((([e,t])=>t===false))){let e=0;if(!r(this,s,"f").includes("lg")){e=t.length-1}const[i,f]=t[e];requestAnimationFrame((()=>r(this,o,"f").emit(i)));n(this,a,i,"f");return}for(const[e,i]of t.reverse()){if(i){requestAnimationFrame((()=>r(this,o,"f").emit(e)));n(this,a,e,"f");break}}}disableBreakpointDetection(){n(this,f,false,"f")}enableBreakpointDetection(){n(this,f,true,"f")}setBreakpoint(e){n(this,a,e,"f");r(this,o,"f").emit(e)}setBreakpoints(e){n(this,s,e,"f");this.onResize()}}s=new WeakMap,o=new WeakMap,a=new WeakMap,f=new WeakMap;const c=new h;export{c as a};
+//# sourceMappingURL=p-fbe017b7.js.map

package/dist/siemens-ix/p-fbe017b7.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["debounce","func","delay","timeoutId","debounced","args","clearTimeout","setTimeout","ApplicationLayoutService","constructor","_ApplicationLayoutService_supportedBreakpoints","set","this","_ApplicationLayoutService_breakpointChangeListener","TypedEvent","_ApplicationLayoutService_breakpoint","_ApplicationLayoutService_isDetectionEnabled","debouncedOnResize","onResize","bind","window","addEventListener","breakpoint","__classPrivateFieldGet","onChange","isDetectionEnabled","matchBreakpoints","breakpoints","forEach","match","matchBreakpoint","push","every","_","breakPointIndex","includes","length","requestAnimationFrame","emit","__classPrivateFieldSet","reverse","disableBreakpointDetection","enableBreakpointDetection","setBreakpoint","setBreakpoints","applicationLayoutService"],"sources":["src/components/utils/debounce.ts","src/components/utils/application-layout/service.ts"],"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 */\ntype AnyFunction = (...args: any[]) => any;\n\nexport function debounce<T extends AnyFunction>(\n  func: T,\n  delay: number\n): (...args: Parameters<T>) => void {\n  let timeoutId: ReturnType<typeof setTimeout>;\n\n  return function debounced(...args: Parameters<T>): void {\n    clearTimeout(timeoutId);\n\n    timeoutId = setTimeout(() => {\n      func(...args);\n    }, delay);\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Breakpoint, matchBreakpoint } from '../breakpoints';\nimport { debounce } from '../debounce';\nimport { TypedEvent } from '../typed-event';\n\nclass ApplicationLayoutService {\n  // Keep order of breakpoints\n  #supportedBreakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  #breakpointChangeListener = new TypedEvent<Breakpoint>();\n  #breakpoint: Breakpoint = 'lg';\n\n  #isDetectionEnabled = true;\n  debouncedOnResize = debounce(this.onResize.bind(this), 50);\n\n  constructor() {\n    if (typeof window !== 'undefined') {\n      window.addEventListener('resize', this.debouncedOnResize.bind(this));\n      this.debouncedOnResize();\n    }\n  }\n\n  get breakpoint() {\n    return this.#breakpoint;\n  }\n\n  get onChange() {\n    return this.#breakpointChangeListener;\n  }\n\n  get isDetectionEnabled() {\n    return this.#isDetectionEnabled;\n  }\n\n  private onResize() {\n    if (!this.#isDetectionEnabled) {\n      return;\n    }\n    if (!this.#supportedBreakpoints) {\n      return;\n    }\n    const matchBreakpoints: [Breakpoint, boolean][] = [];\n\n    const breakpoints = this.#supportedBreakpoints;\n\n    breakpoints.forEach((breakpoint) => {\n      const match = matchBreakpoint(breakpoint);\n      matchBreakpoints.push([breakpoint, match]);\n    });\n\n    if (matchBreakpoints.every(([_, match]) => match === false)) {\n      let breakPointIndex = 0;\n      if (!this.#supportedBreakpoints.includes('lg')) {\n        breakPointIndex = matchBreakpoints.length - 1;\n      }\n\n      const [breakpoint, _] = matchBreakpoints[breakPointIndex];\n      requestAnimationFrame(() =>\n        this.#breakpointChangeListener.emit(breakpoint)\n      );\n      this.#breakpoint = breakpoint;\n      return;\n    }\n\n    for (const [breakpoint, match] of matchBreakpoints.reverse()) {\n      if (match) {\n        requestAnimationFrame(() =>\n          this.#breakpointChangeListener.emit(breakpoint)\n        );\n        this.#breakpoint = breakpoint;\n        break;\n      }\n    }\n  }\n\n  public disableBreakpointDetection() {\n    this.#isDetectionEnabled = false;\n  }\n\n  public enableBreakpointDetection() {\n    this.#isDetectionEnabled = true;\n  }\n\n  public setBreakpoint(breakpoint: Breakpoint) {\n    this.#breakpoint = breakpoint;\n    this.#breakpointChangeListener.emit(breakpoint);\n  }\n\n  public setBreakpoints(breakpoints: Breakpoint[]) {\n    this.#supportedBreakpoints = breakpoints;\n    this.onResize();\n  }\n}\n\nexport const applicationLayoutService = new ApplicationLayoutService();\n"],"mappings":"iFAUgBA,EACdC,EACAC,GAEA,IAAIC,EAEJ,OAAO,SAASC,KAAaC,GAC3BC,aAAaH,GAEbA,EAAYI,YAAW,KACrBN,KAAQI,EAAK,GACZH,E,CAEP,C,swBCXA,MAAMM,EASJ,WAAAC,GAPAC,EAAAC,IAAAC,KAAsC,CAAC,KAAM,KAAM,OACnDC,EAAAF,IAAAC,KAA4B,IAAIE,GAChCC,EAAAJ,IAAAC,KAA0B,MAE1BI,EAAAL,IAAAC,KAAsB,MACtBA,KAAAK,kBAAoBjB,EAASY,KAAKM,SAASC,KAAKP,MAAO,IAGrD,UAAWQ,SAAW,YAAa,CACjCA,OAAOC,iBAAiB,SAAUT,KAAKK,kBAAkBE,KAAKP,OAC9DA,KAAKK,mB,EAIT,cAAIK,GACF,OAAOC,EAAAX,KAAIG,EAAA,I,CAGb,YAAIS,GACF,OAAOD,EAAAX,KAAIC,EAAA,I,CAGb,sBAAIY,GACF,OAAOF,EAAAX,KAAII,EAAA,I,CAGL,QAAAE,GACN,IAAKK,EAAAX,KAAII,EAAA,KAAsB,CAC7B,M,CAEF,IAAKO,EAAAX,KAAIF,EAAA,KAAwB,CAC/B,M,CAEF,MAAMgB,EAA4C,GAElD,MAAMC,EAAcJ,EAAAX,KAAIF,EAAA,KAExBiB,EAAYC,SAASN,IACnB,MAAMO,EAAQC,EAAgBR,GAC9BI,EAAiBK,KAAK,CAACT,EAAYO,GAAO,IAG5C,GAAIH,EAAiBM,OAAM,EAAEC,EAAGJ,KAAWA,IAAU,QAAQ,CAC3D,IAAIK,EAAkB,EACtB,IAAKX,EAAAX,KAAIF,EAAA,KAAuByB,SAAS,MAAO,CAC9CD,EAAkBR,EAAiBU,OAAS,C,CAG9C,MAAOd,EAAYW,GAAKP,EAAiBQ,GACzCG,uBAAsB,IACpBd,EAAAX,KAAIC,EAAA,KAA2ByB,KAAKhB,KAEtCiB,EAAA3B,KAAIG,EAAeO,EAAU,KAC7B,M,CAGF,IAAK,MAAOA,EAAYO,KAAUH,EAAiBc,UAAW,CAC5D,GAAIX,EAAO,CACTQ,uBAAsB,IACpBd,EAAAX,KAAIC,EAAA,KAA2ByB,KAAKhB,KAEtCiB,EAAA3B,KAAIG,EAAeO,EAAU,KAC7B,K,GAKC,0BAAAmB,GACLF,EAAA3B,KAAII,EAAuB,MAAK,I,CAG3B,yBAAA0B,GACLH,EAAA3B,KAAII,EAAuB,KAAI,I,CAG1B,aAAA2B,CAAcrB,GACnBiB,EAAA3B,KAAIG,EAAeO,EAAU,KAC7BC,EAAAX,KAAIC,EAAA,KAA2ByB,KAAKhB,E,CAG/B,cAAAsB,CAAejB,GACpBY,EAAA3B,KAAIF,EAAyBiB,EAAW,KACxCf,KAAKM,U,gEAII2B,EAA2B,IAAIrC,S"}