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

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

@@ -1 +1 @@
-{"version":3,"file":"ix-slider.entry.js","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@use '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  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n\n  // Slider specific calculations\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n\n  // Theme colors:\n  --trace-reference-color: var(--theme-color-8); // Neu token\n  --trace-color: var(--theme-slider-trace--background);\n  --tick-color: var(--theme-slider-track-marker--background);\n  --tick-color--active: var(--theme-slider-trace-marker--background);\n  --track-color: var(--theme-slider-track--background);\n\n  @include component.ix-component;\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-slider-thumb--background--hover);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-slider-thumb--background--active);\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-slider-trace--background--invalid);\n  --tick-color--active: var(--theme-slider-trace-marker--background--invalid);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--invalid);\n  }\n\n  @include thumb-hover() {\n    background-color: var(--theme-slider-thumb--background--invalid--hover);\n  }\n\n  @include thumb-active() {\n    background-color: var(--theme-slider-thumb--background--invalid--active);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-slider-track--background--disabled);\n  --trace-color: var(--theme-slider-trace--background--disabled);\n  --tick-color: var(--theme-slider-track-marker--background--disabled);\n  --tick-color--active: var(--theme-slider-trace-marker--background--disabled);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--disabled);\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';\nimport { makeRef } from '../utils/make-ref';\nimport type { SliderMarker } from './slider.types';\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 * @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  private readonly thumbRef = makeRef<HTMLDivElement>();\n  private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n  get tooltip() {\n    return this.tooltipRef.current;\n  }\n\n  get pseudoThumb() {\n    return this.thumbRef.current;\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 && this.pseudoThumb) {\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 = parseFloat(this.slider.value);\n\n    if (!isNaN(value)) {\n      const oldValue = this.rangeInput;\n      this.rangeInput = value;\n\n      const { defaultPrevented } = this.emitInputEvent();\n\n      if (defaultPrevented) {\n        this.rangeInput = oldValue;\n        this.slider.value = oldValue.toString();\n      }\n    }\n  }\n\n  private emitInputEvent() {\n    return 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              ref={this.thumbRef}\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            ref={this.tooltipRef}\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n            for={this.thumbRef.waitForCurrent()}\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'} textColor=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-slider.entry.js","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@use '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  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n\n  // Slider specific calculations\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n\n  // Theme colors:\n  --trace-reference-color: var(\n    --theme-slider-track-marker--background\n  ); // Neu token\n  --trace-color: var(--theme-slider-trace--background);\n  --tick-color: var(--theme-slider-track-marker--background);\n  --tick-color--active: var(--theme-slider-trace-marker--background);\n  --track-color: var(--theme-slider-track--background);\n\n  @include component.ix-component;\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-slider-thumb--background);\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-slider-thumb--background--hover);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-slider-thumb--background--active);\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-slider-trace--background--invalid);\n  --tick-color--active: var(--theme-slider-trace-marker--background--invalid);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--invalid);\n  }\n\n  @include thumb-hover() {\n    background-color: var(--theme-slider-thumb--background--invalid--hover);\n  }\n\n  @include thumb-active() {\n    background-color: var(--theme-slider-thumb--background--invalid--active);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-slider-track--background--disabled);\n  --trace-color: var(--theme-slider-trace--background--disabled);\n  --tick-color: var(--theme-slider-track-marker--background--disabled);\n  --tick-color--active: var(--theme-slider-trace-marker--background--disabled);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--disabled);\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';\nimport { makeRef } from '../utils/make-ref';\nimport type { SliderMarker } from './slider.types';\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 * @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  private readonly thumbRef = makeRef<HTMLDivElement>();\n  private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n  get tooltip() {\n    return this.tooltipRef.current;\n  }\n\n  get pseudoThumb() {\n    return this.thumbRef.current;\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 && this.pseudoThumb) {\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 = parseFloat(this.slider.value);\n\n    if (!isNaN(value)) {\n      const oldValue = this.rangeInput;\n      this.rangeInput = value;\n\n      const { defaultPrevented } = this.emitInputEvent();\n\n      if (defaultPrevented) {\n        this.rangeInput = oldValue;\n        this.slider.value = oldValue.toString();\n      }\n    }\n  }\n\n  private emitInputEvent() {\n    return 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              ref={this.thumbRef}\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            ref={this.tooltipRef}\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n            for={this.thumbRef.waitForCurrent()}\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'} textColor=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/ix-event-list-item.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-event-list-item.entry.esm.js","sources":["src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n@use 'mixins/shadow-dom/host-disabled';\n@use './common-variables' as vars;\n\n$default-event-list-item-height: 2.5rem;\n\n@mixin host-variants($variant) {\n  :host(.event-list-item-#{$variant}) {\n    .event-list-item {\n      --ix-event-list-item--color-border: var(\n        --theme-event-item-#{$variant}--border\n      );\n\n      // Backgrounds\n      --ix-event-list-item--background: var(\n        --theme-event-item-#{$variant}--background\n      );\n      --ix-event-list-item--background--hover: var(\n        --theme-event-item-#{$variant}--background--hover\n      );\n      --ix-event-list-item--background--active: var(\n        --theme-event-item-#{$variant}--background--active\n      );\n      --ix-event-list-item--background--selected: var(\n        --theme-event-item-#{$variant}--background--selected\n      );\n\n      //Borders\n      --ix-event-list-item--border--hover: var(\n        --theme-event-item-#{$variant}--border--hover\n      );\n      --ix-event-list-item--border--active: var(\n        --theme-event-item-#{$variant}--border--active\n      );\n      --ix-event-list-item--border--selected: var(\n        --theme-event-item-#{$variant}--border--selected\n      );\n      --ix-event-list-item--border--disabled: var(\n        --theme-event-item-#{$variant}--border--disabled\n      );\n    }\n  }\n}\n\n@include host-variants('outline');\n@include host-variants('filled');\n\n:host {\n  @include component.ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(\n      --event-list-item-border-radius,\n      vars.$default-border-radius\n    );\n    background-color: var(--ix-event-list-item--background);\n    overflow: hidden;\n    transition: var(--theme-default-time);\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, vars.$small-space);\n\n    .indicator {\n      height: 100%;\n      width: vars.$small-space;\n      max-width: vars.$small-space;\n      min-width: vars.$small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{vars.$default-space} + #{vars.$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--ix-event-list-item--color-border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n      border-left: none;\n      padding-left: vars.$default-space;\n\n      @include text-truncation.ellipsis;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n      padding-inline-end: vars.$small-space;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: vars.$small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover.hover {\n        background-color: var(--ix-event-list-item--background--hover);\n      }\n\n      @include hover.active {\n        background-color: var(--ix-event-list-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover.hover {\n          border-color: var(--ix-event-list-item--border--hover);\n        }\n\n        @include hover.active {\n          border-color: var(--ix-event-list-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--ix-event-list-item--background--selected);\n      border-color: var(--ix-event-list-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--ix-event-list-item--background--disabled);\n        border-color: var(--ix-event-list-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled.host-disabled;\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 { iconChevronRight } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Variant of the event list item\n   *\n   * @since 4.0.0\n   */\n  @Prop() variant: 'outline' | 'filled' = 'outline';\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * {@link https://ix.siemens.io/docs/theming/colors/}\n   */\n  @Prop() itemColor?: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron = false;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick!: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          [`event-list-item-${this.variant}`]: true,\n        }}\n      >\n        <div\n          role=\"listitem\"\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.itemColor ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.itemColor ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={iconChevronRight}\n                size=\"16\"\n                class=\"chevron-icon\"\n                aria-hidden=\"true\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m8LAAm8L;;MC0B/8L,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyB,SAAS;AAWjD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AA0DxB;IAlDC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;IAGvB,MAAM,GAAA;;AACJ,QAAA,IAAI,KAAK,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,SAAS,CAAC;AAC/C,cAAE,CAAA,IAAA,EAAO,IAAI,CAAC,SAAS,CAAG,CAAA;AAC1B,cAAE,CAAe,YAAA,EAAA,IAAI,CAAC,SAAS,GAAG;QAEpC,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAC1C,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EAAA,eAAA,EACA,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAa,UAAA,EAAA,CAAC,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9D,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,GAAG,SAAS;AACtD,gBAAA,OAAO,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAE,CAAA;AACtC,aAAA,EACI,CAAA,EAEP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,EAAA,aAAA,EACR,MAAM,EAAA,CACT,CACZ,CACG,CACF,CACD;;;;;;;"}
+{"version":3,"file":"ix-event-list-item.entry.esm.js","sources":["src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n@use 'mixins/shadow-dom/host-disabled';\n@use './common-variables' as vars;\n\n$default-event-list-item-height: 2.5rem;\n\n@mixin host-variants($variant) {\n  :host(.event-list-item-#{$variant}) {\n    .event-list-item {\n      --ix-event-list-item--color-border: var(\n        --theme-event-item-#{$variant}--border\n      );\n\n      // Backgrounds\n      --ix-event-list-item--background: var(\n        --theme-event-item-#{$variant}--background\n      );\n      --ix-event-list-item--background--hover: var(\n        --theme-event-item-#{$variant}--background--hover\n      );\n      --ix-event-list-item--background--active: var(\n        --theme-event-item-#{$variant}--background--active\n      );\n      --ix-event-list-item--background--selected: var(\n        --theme-event-item-#{$variant}--background--selected\n      );\n\n      // Borders\n      --ix-event-list-item--border--hover: var(\n        --theme-event-item-#{$variant}--border--hover\n      );\n      --ix-event-list-item--border--active: var(\n        --theme-event-item-#{$variant}--border--active\n      );\n      --ix-event-list-item--border--selected: var(\n        --theme-event-item-#{$variant}--border--selected\n      );\n      --ix-event-list-item--border--disabled: var(\n        --theme-event-item-#{$variant}--border--disabled\n      );\n    }\n  }\n}\n\n@include host-variants('outline');\n@include host-variants('filled');\n\n:host {\n  @include component.ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(\n      --event-list-item-border-radius,\n      vars.$default-border-radius\n    );\n    background-color: var(--ix-event-list-item--background);\n    overflow: hidden;\n    transition: var(--theme-default-time);\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, vars.$small-space);\n\n    .indicator {\n      height: 100%;\n      width: vars.$small-space;\n      max-width: vars.$small-space;\n      min-width: vars.$small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{vars.$default-space} + #{vars.$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--ix-event-list-item--color-border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        vars.$default-border-radius\n      );\n      border-left: none;\n      padding-left: vars.$default-space;\n\n      @include text-truncation.ellipsis;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n      padding-inline-end: vars.$small-space;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: vars.$small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover.hover {\n        background-color: var(--ix-event-list-item--background--hover);\n      }\n\n      @include hover.active {\n        background-color: var(--ix-event-list-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover.hover {\n          border-color: var(--ix-event-list-item--border--hover);\n        }\n\n        @include hover.active {\n          border-color: var(--ix-event-list-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--ix-event-list-item--background--selected);\n      border-color: var(--ix-event-list-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--ix-event-list-item--background--disabled);\n        border-color: var(--ix-event-list-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled.host-disabled;\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 { iconChevronRight } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Variant of the event list item\n   *\n   * @since 4.0.0\n   */\n  @Prop() variant: 'outline' | 'filled' = 'outline';\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * {@link https://ix.siemens.io/docs/theming/colors/}\n   */\n  @Prop() itemColor?: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron = false;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick!: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          [`event-list-item-${this.variant}`]: true,\n        }}\n      >\n        <div\n          role=\"listitem\"\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${!this.itemColor ? 'indicator-empty' : ''}`}\n            style={{\n              'background-color': this.itemColor ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={iconChevronRight}\n                size=\"16\"\n                class=\"chevron-icon\"\n                aria-hidden=\"true\"\n              ></ix-icon>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m8LAAm8L;;MC0B/8L,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyB,SAAS;AAWjD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AA0DxB;IAlDC,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;IAGvB,MAAM,GAAA;;AACJ,QAAA,IAAI,KAAK,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,SAAS,CAAC;AAC/C,cAAE,CAAA,IAAA,EAAO,IAAI,CAAC,SAAS,CAAG,CAAA;AAC1B,cAAE,CAAe,YAAA,EAAA,IAAI,CAAC,SAAS,GAAG;QAEpC,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAC1C,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EAAA,eAAA,EACA,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAa,UAAA,EAAA,CAAC,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9D,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,GAAG,SAAS;AACtD,gBAAA,OAAO,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAE,CAAA;AACtC,aAAA,EACI,CAAA,EAEP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,EAAA,aAAA,EACR,MAAM,EAAA,CACT,CACZ,CACG,CACF,CACD;;;;;;;"}

package/dist/siemens-ix/ix-pane.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-pane.entry.esm.js","sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n  @if $composition {\n    border-#{$composition}: var(--theme-app-header--border-width)\n      solid\n      var(--ix-pane--border-color);\n  }\n}\n\n:host(.floating-pane) {\n  --ix-pane--background: var(--theme-pane-floating--background);\n  --ix-pane--border-color: var(--theme-pane-floating--border-color);\n}\n\n:host(.inline-pane) {\n  --ix-pane--background: var(--theme-pane-inline--background);\n  --ix-pane--border-color: var(--theme-pane-inline--border-color);\n  --ix-pane--color: var(--theme-pane-inline--color);\n}\n\n:host {\n  background-color: var(--ix-pane--background);\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  @include component.ix-component;\n\n  aside {\n    width: 100%;\n    height: 100%;\n  }\n\n  .pane-icon {\n    color: var(--ix-pane--color);\n  }\n\n  .slot-header-content {\n    display: inline-block;\n    position: relative;\n    max-height: 2rem;\n  }\n\n  .title-text {\n    display: flex;\n    align-items: center;\n    gap: var(--theme-space-1);\n    overflow: hidden;\n\n    .title-text-overflow {\n      width: 100%;\n      height: 100%;\n      display: contents;\n\n      * {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n    }\n  }\n\n  .header-gap {\n    gap: var(--theme-space-1);\n  }\n\n  .top-bottom-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)\n        var(--theme-space-2);\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane {\n    display: flex;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin: var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)\n        var(--theme-space--1);\n\n      .title-text {\n        flex-direction: row-reverse;\n        justify-content: start;\n        flex-direction: row;\n      }\n\n      .rotate {\n        writing-mode: vertical-lr;\n        text-orientation: mixed;\n        transform: rotate(180deg);\n        flex-direction: row-reverse;\n\n        ix-icon {\n          transform: rotate(90deg);\n        }\n      }\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane.expanded {\n    flex-direction: column;\n  }\n\n  .mobile-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title-mobile {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      margin: var(--theme-space-1) var(--theme-space-2);\n    }\n  }\n\n  .side-pane-content {\n    padding: var(--theme-space-1) var(--theme-space-2);\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .slot-header {\n    max-height: 2rem;\n    max-width: unset;\n  }\n\n  .slot-header.rotate {\n    max-height: unset;\n    max-width: 2rem;\n  }\n}\n\n:host(.not-visible) {\n  display: none;\n}\n\n:host(.inline-pane) {\n  background-color: var(--ix-pane--background);\n}\n\n:host(.box-shadow) {\n  box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n  border-left: var(--theme-app-header--border-width) solid\n    var(--ix-pane--border-color);\n}\n\n:host(.left-pane-border) {\n  @include set-border(right);\n}\n\n:host(.right-pane-border) {\n  @include set-border(left);\n}\n\n:host(.top-pane-border) {\n  @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n  @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n  width: 100%;\n  position: absolute;\n  z-index: 100 !important;\n\n  .side-pane-content {\n    height: calc(100% - 2.5rem);\n  }\n}\n\n:host(.mobile-border-top) {\n  @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n  @include set-border(top);\n}\n\n:host(.top-expanded) {\n  top: 0;\n}\n\n:host(.bottom-expanded) {\n  bottom: 0;\n}\n\n:host(.left-right-pane) {\n  height: 100%;\n}\n\n:host(.top-bottom-pane) {\n  width: 100%;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  iconClose,\n  iconDoubleChevronDown,\n  iconDoubleChevronLeft,\n  iconDoubleChevronRight,\n  iconDoubleChevronUp,\n} from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { JSAnimation } from 'animejs';\nimport { animate } from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\nimport {\n  addDisposableEventListener,\n  DisposableEventListener,\n} from '../utils/disposable-event-listener';\nimport type {\n  BorderlessChangedEvent,\n  Composition,\n  ExpandedChangedEvent,\n  HideOnCollapseChangedEvent,\n  SlotChangedEvent,\n  VariantChangedEvent,\n} from './pane.types';\n\n/**\n * @slot header - Additional slot for the header content\n */\n@Component({\n  tag: 'ix-pane',\n  styleUrl: 'pane.scss',\n  shadow: true,\n})\nexport class Pane {\n  @Element() hostElement!: HTMLIxPaneElement;\n\n  /**\n   * Title of the side panel\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Variant of the side pane.\n   * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Define if the pane should have a collapsed state\n   */\n  @Prop() hideOnCollapse: boolean = false;\n\n  /**\n   * The maximum size of the sidebar, when it is expanded\n   */\n  @Prop() size:\n    | '240px'\n    | '320px'\n    | '360px'\n    | '480px'\n    | '600px'\n    | '33%'\n    | '50%' = '240px';\n\n  /**\n   * Toggle the border of the pane.\n   * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n   */\n  @Prop() borderless: boolean = false;\n\n  /**\n   * State of the pane\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * Defines the position of the pane inside it's container.\n   * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n   */\n  @Prop({ mutable: true }) composition: Composition = 'top';\n\n  /**\n   * Name of the icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * If true, the pane will close when clicking outside of it\n   */\n  @Prop() closeOnClickOutside = false;\n\n  /**\n   * ARIA label for the icon\n   */\n  @Prop() ariaLabelIcon?: string;\n\n  /**\n   * ARIA label close or collapse button\n   */\n  @Prop() ariaLabelCollapseCloseButton?: string;\n\n  /**\n   * @internal\n   * Prevents overwriting of the variant and borderless property when used inside layout\n   */\n  @Prop() ignoreLayoutSettings: boolean = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) isMobile: boolean = false;\n\n  /**\n   * This event is triggered when the pane either expands or contracts\n   */\n  @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() variantChanged!: EventEmitter<VariantChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() borderlessChanged!: EventEmitter<BorderlessChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() hideOnCollapseChanged!: EventEmitter<HideOnCollapseChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() slotChanged!: EventEmitter<SlotChangedEvent>;\n\n  @State() private expandIcon = '';\n  @State() private showContent = false;\n  @State() private minimizeIcon = '';\n  @State() private floating = false;\n  @State() private parentWidthPx = 0;\n  @State() private parentHeightPx = 0;\n\n  private static readonly validPositions = ['top', 'left', 'bottom', 'right'];\n  private static readonly collapsedPane = '40px';\n  private static readonly collapsedPaneMobile = '48px';\n  private readonly animations: Map<string, JSAnimation> = new Map();\n  private animationCounter = 0;\n\n  private mutationObserver?: MutationObserver;\n  private resizeObserver?: ResizeObserver;\n  private disposableWindowClick?: DisposableEventListener;\n\n  get currentSlot() {\n    return this.hostElement.getAttribute('slot');\n  }\n\n  get isBottomTopPane() {\n    return this.composition === 'bottom' || this.composition === 'top';\n  }\n\n  get isLeftRightPane() {\n    return this.composition === 'left' || this.composition === 'right';\n  }\n\n  get isMobileTop() {\n    return this.composition === 'top' || this.composition === 'left';\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n    this.disposableWindowClick?.();\n  }\n\n  @Watch('expanded')\n  onExpandedChange() {\n    if (!this.closeOnClickOutside || !this.expanded) {\n      this.disposableWindowClick?.();\n      return;\n    }\n\n    this.disposableWindowClick = addDisposableEventListener(\n      window,\n      'click',\n      (event) => {\n        const path = event.composedPath?.() || [];\n        if (!path.includes(this.hostElement)) {\n          this.dispatchExpandedChangedEvent();\n        }\n      }\n    );\n  }\n\n  componentWillLoad() {\n    this.onExpandedChange();\n    this.setIcons();\n\n    this.floating = this.variant === 'floating';\n\n    if (this.expanded) {\n      this.onParentSizeChange();\n    }\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n\n    if (this.currentSlot) {\n      this.setPosition(this.currentSlot);\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'slot'\n        ) {\n          const newSlot = this.currentSlot;\n          const oldSlot = mutation.oldValue;\n\n          if (newSlot !== oldSlot) {\n            this.slotChanged.emit({\n              slot: oldSlot ?? '',\n              newSlot: newSlot ?? '',\n            });\n\n            if (newSlot) {\n              this.setPosition(newSlot);\n            }\n          }\n        }\n      });\n    });\n    this.mutationObserver.observe(this.hostElement, {\n      attributes: true,\n      attributeOldValue: true,\n    });\n\n    const parentElement = this.hostElement.parentElement;\n    this.resizeObserver = new ResizeObserver((entries) => {\n      this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n      this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n    });\n    if (parentElement) this.resizeObserver.observe(parentElement);\n  }\n\n  private setPosition(value: string) {\n    if (Pane.validPositions.includes(value)) {\n      this.composition = value as Composition;\n    }\n  }\n\n  private getExpandPaneSize() {\n    let expandPaneSize: string;\n\n    if (this.isBottomTopPane) {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentHeightPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n        }\n      }\n    } else {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentWidthPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n        }\n      }\n    }\n\n    return expandPaneSize;\n  }\n\n  private setIcons() {\n    const { expandIcon, minimizeIcon } = this.getIconNames();\n    this.expandIcon = expandIcon;\n    this.minimizeIcon = minimizeIcon;\n  }\n\n  private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n    let expandIcon = '';\n    let minimizeIcon = '';\n\n    switch (this.composition) {\n      case 'left':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        break;\n      case 'right':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        break;\n      case 'bottom':\n        expandIcon = iconDoubleChevronDown;\n        minimizeIcon = iconDoubleChevronUp;\n        break;\n      case 'top':\n        expandIcon = iconDoubleChevronUp;\n        minimizeIcon = iconDoubleChevronDown;\n        break;\n    }\n\n    return { expandIcon, minimizeIcon };\n  }\n\n  private getKey() {\n    return (this.animationCounter++).toString();\n  }\n\n  private animateVerticalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = animate(this.hostElement, {\n      duration: Animation.mediumTime,\n      width: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          this.animateVerticalPadding('0px');\n        } else {\n          this.animateVerticalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateHorizontalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = animate(this.hostElement, {\n      duration: Animation.mediumTime,\n      height: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      onBegin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          if (!this.isMobile) this.animateHorizontalPadding('0px');\n        } else {\n          if (!this.isMobile) this.animateHorizontalPadding('8px');\n        }\n      },\n      onComplete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private removePadding() {\n    animate(this.hostElement.shadowRoot!.querySelector('#title-div')!, {\n      duration: 0,\n      paddingTop: 0,\n      paddingBottom: 0,\n      paddingLeft: 0,\n      paddingRight: 0,\n      delay: 0,\n    });\n  }\n\n  private animateHorizontalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = animate(\n      this.hostElement.shadowRoot!.querySelector('#title-div')!,\n      {\n        duration: duration,\n        paddingTop: size,\n        paddingBottom: size,\n        easing: 'easeInOutSine',\n        delay: 0,\n        onComplete: () => {\n          this.animations.delete(key);\n        },\n      }\n    );\n\n    this.animations.set(key, animation);\n  }\n\n  private animateVerticalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = animate(\n      this.hostElement.shadowRoot!.querySelector('#title-div')!,\n      {\n        duration: duration,\n        paddingLeft: size,\n        paddingRight: size,\n        easing: 'easeInOutSine',\n        delay: 0,\n        onComplete: () => {\n          this.animations.delete(key);\n        },\n      }\n    );\n\n    this.animations.set(key, animation);\n  }\n\n  private clearAnimations() {\n    this.animations.forEach((animation) => animation.pause());\n    this.animations.clear();\n    this.animationCounter = 0;\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.hostElement.style.removeProperty('min-height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('composition')\n  onPositionChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('hideOnCollapse')\n  onHideOnCollapseChange(value: boolean) {\n    this.onParentSizeChange();\n\n    this.hideOnCollapseChanged.emit({\n      slot: this.currentSlot ?? '',\n      hideOnCollapse: value,\n    });\n  }\n\n  @Watch('variant')\n  onVariantChange(value: 'inline' | 'floating') {\n    this.floating = value === 'floating';\n\n    this.variantChanged.emit({\n      slot: this.currentSlot ?? '',\n      variant: value,\n    });\n  }\n\n  @Watch('borderless')\n  onBorderlessChange(value: boolean) {\n    this.borderlessChanged.emit({\n      slot: this.currentSlot ?? '',\n      borderless: value,\n    });\n  }\n\n  private dispatchExpandedChangedEvent() {\n    const event = this.expandedChanged.emit({\n      slot: this.currentSlot ?? '',\n      expanded: !this.expanded,\n    });\n\n    if (!event.defaultPrevented) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  @Watch('parentHeightPx')\n  @Watch('parentWidthPx')\n  onParentSizeChange() {\n    this.clearAnimations();\n    this.removePadding();\n\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.height = '100%';\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = expandPaneSize;\n          this.animateHorizontalPadding('8px', 0);\n        } else {\n          this.hostElement.style.width = expandPaneSize;\n          this.animateVerticalPadding('8px', 0);\n        }\n      }\n\n      this.showContent = true;\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        }\n      }\n    }\n  }\n\n  @Watch('expanded')\n  @Watch('size')\n  onSizeChange() {\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.minHeight = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n        this.animateHorizontalFadeIn('100%');\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateHorizontalFadeIn(expandPaneSize);\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateVerticalFadeIn(expandPaneSize);\n        }\n      }\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.animateHorizontalFadeIn(Pane.collapsedPane);\n        } else {\n          this.animateVerticalFadeIn(Pane.collapsedPane);\n        }\n      }\n    }\n  }\n\n  render() {\n    const rotate = !this.expanded && !this.isMobile && this.isLeftRightPane;\n    return (\n      <Host\n        class={{\n          'floating-pane': this.floating,\n          'inline-pane': !this.floating,\n          'mobile-overlay': this.expanded && this.isMobile,\n          'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n          'bottom-expanded':\n            this.expanded && !this.isMobileTop && this.isMobile,\n          'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n          'left-right-pane': this.isLeftRightPane && !this.isMobile,\n          [`${this.composition}-pane-border`]:\n            !this.borderless && !this.isMobile && !this.floating,\n          'nav-left-border':\n            !this.borderless &&\n            !this.isMobile &&\n            this.composition !== 'right' &&\n            this.floating,\n          'mobile-border-top':\n            !this.borderless &&\n            this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'mobile-border-bottom':\n            !this.borderless &&\n            !this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'box-shadow': this.floating,\n          'aria-expanded': this.expanded,\n          'not-visible': this.hideOnCollapse && !this.expanded,\n        }}\n      >\n        <aside\n          id={`pane-${this.composition}`}\n          class={{\n            'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n            'left-right-pane': this.isLeftRightPane && !this.isMobile,\n            'mobile-pane': this.isMobile,\n            expanded: this.expanded,\n          }}\n        >\n          <div\n            id=\"title-div\"\n            class={{\n              title:\n                !this.isMobile && !this.hideOnCollapse && !this.showContent,\n              'title-finished':\n                !this.isMobile && !this.hideOnCollapse && this.showContent,\n              'title-expanded':\n                !this.isMobile && !this.hideOnCollapse && this.expanded,\n              'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n              'title-mobile': this.isMobile,\n              'header-gap': !this.isMobile && !this.hideOnCollapse,\n            }}\n          >\n            <ix-icon-button\n              class=\"title-icon\"\n              size=\"24\"\n              icon={\n                this.expanded\n                  ? this.isMobile || this.hideOnCollapse\n                    ? iconClose\n                    : this.expandIcon\n                  : this.minimizeIcon\n              }\n              iconColor={\n                this.expanded && (this.isMobile || this.hideOnCollapse)\n                  ? 'color-soft-text'\n                  : undefined\n              }\n              variant=\"subtle-tertiary\"\n              onClick={() => this.dispatchExpandedChangedEvent()}\n              aria-controls={`pane-${this.composition}`}\n              aria-label={this.ariaLabelCollapseCloseButton}\n            />\n            <div\n              class={{\n                'title-text': true,\n                rotate: rotate,\n              }}\n            >\n              {this.icon && (\n                <ix-icon\n                  class=\"pane-icon\"\n                  size=\"24\"\n                  name={this.icon}\n                  aria-label={this.ariaLabelIcon}\n                ></ix-icon>\n              )}\n              <div class=\"title-text-overflow\">\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              </div>\n              {this.expanded && (\n                <div class=\"slot-header\">\n                  <slot name=\"header\"></slot>\n                </div>\n              )}\n            </div>\n          </div>\n          <div class=\"side-pane-content\" hidden={!this.showContent}>\n            <slot></slot>\n          </div>\n        </aside>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-pane.entry.esm.js","sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n  @if $composition {\n    border-#{$composition}: var(--theme-app-header--border-width)\n      solid\n      var(--ix-pane--border-color);\n  }\n}\n\n:host(.floating-pane) {\n  --ix-pane--background: var(--theme-pane-floating--background);\n  --ix-pane--border-color: var(--theme-pane-floating--border-color);\n  --ix-pane--color: var(--theme-pane-floating--color);\n  --ix-pane--box-shadow: var(--theme-pane-floating--box-shadow);\n}\n\n:host(.inline-pane) {\n  --ix-pane--background: var(--theme-pane-inline--background);\n  --ix-pane--border-color: var(--theme-pane-inline--border-color);\n  --ix-pane--color: var(--theme-pane-inline--color);\n  --ix-pane--box-shadow: var(--theme-pane-inline--box-shadow);\n}\n\n:host {\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  box-shadow: var(--ix-pane--box-shadow);\n  background-color: var(--ix-pane--background);\n\n  @include component.ix-component;\n\n  aside {\n    width: 100%;\n    height: 100%;\n  }\n\n  .pane-icon {\n    color: var(--ix-pane--color);\n  }\n\n  .slot-header-content {\n    display: inline-block;\n    position: relative;\n    max-height: 2rem;\n  }\n\n  .title-text {\n    display: flex;\n    align-items: center;\n    gap: var(--theme-space-1);\n    overflow: hidden;\n\n    .title-text-overflow {\n      width: 100%;\n      height: 100%;\n      display: contents;\n\n      * {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n    }\n  }\n\n  .header-gap {\n    gap: var(--theme-space-1);\n  }\n\n  .top-bottom-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)\n        var(--theme-space-2);\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane {\n    display: flex;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin: var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)\n        var(--theme-space--1);\n\n      .title-text {\n        flex-direction: row-reverse;\n        justify-content: start;\n        flex-direction: row;\n      }\n\n      .rotate {\n        writing-mode: vertical-lr;\n        text-orientation: mixed;\n        transform: rotate(180deg);\n        flex-direction: row-reverse;\n\n        ix-icon {\n          transform: rotate(90deg);\n        }\n      }\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)\n        var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane.expanded {\n    flex-direction: column;\n  }\n\n  .mobile-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title-mobile {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      margin: var(--theme-space-1) var(--theme-space-2);\n    }\n  }\n\n  .side-pane-content {\n    padding: var(--theme-space-1) var(--theme-space-2) var(--theme-space-3)\n      var(--theme-space-2);\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n  }\n\n  .slot-header {\n    max-height: 2rem;\n    max-width: unset;\n  }\n\n  .slot-header.rotate {\n    max-height: unset;\n    max-width: 2rem;\n  }\n}\n\n:host(.not-visible) {\n  display: none;\n}\n\n:host(.nav-left-border) {\n  border-left: var(--theme-app-header--border-width) solid\n    var(--ix-pane--border-color);\n}\n\n:host(.left-pane-border) {\n  @include set-border(right);\n}\n\n:host(.right-pane-border) {\n  @include set-border(left);\n}\n\n:host(.top-pane-border) {\n  @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n  @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n  width: 100%;\n  position: absolute;\n  z-index: 100 !important;\n\n  .side-pane-content {\n    height: calc(100% - 2.5rem);\n  }\n}\n\n:host(.mobile-border-top) {\n  @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n  @include set-border(top);\n}\n\n:host(.top-expanded) {\n  top: 0;\n}\n\n:host(.bottom-expanded) {\n  bottom: 0;\n}\n\n:host(.left-right-pane) {\n  height: 100%;\n}\n\n:host(.top-bottom-pane) {\n  width: 100%;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  iconClose,\n  iconDoubleChevronDown,\n  iconDoubleChevronLeft,\n  iconDoubleChevronRight,\n  iconDoubleChevronUp,\n} from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { JSAnimation } from 'animejs';\nimport { animate } from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\nimport {\n  addDisposableEventListener,\n  DisposableEventListener,\n} from '../utils/disposable-event-listener';\nimport type {\n  BorderlessChangedEvent,\n  Composition,\n  ExpandedChangedEvent,\n  HideOnCollapseChangedEvent,\n  SlotChangedEvent,\n  VariantChangedEvent,\n} from './pane.types';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @slot header - Additional slot for the header content\n */\n@Component({\n  tag: 'ix-pane',\n  styleUrl: 'pane.scss',\n  shadow: true,\n})\nexport class Pane {\n  @Element() hostElement!: HTMLIxPaneElement;\n\n  /**\n   * Title of the side panel\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Variant of the side pane.\n   * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Define if the pane should have a collapsed state\n   */\n  @Prop() hideOnCollapse: boolean = false;\n\n  /**\n   * The maximum size of the sidebar, when it is expanded\n   */\n  @Prop() size:\n    | '240px'\n    | '320px'\n    | '360px'\n    | '480px'\n    | '600px'\n    | '33%'\n    | '50%' = '240px';\n\n  /**\n   * Toggle the border of the pane.\n   * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n   */\n  @Prop() borderless: boolean = false;\n\n  /**\n   * State of the pane\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * Defines the position of the pane inside it's container.\n   * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n   */\n  @Prop({ mutable: true }) composition: Composition = 'top';\n\n  /**\n   * Name of the icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * If true, the pane will close when clicking outside of it\n   */\n  @Prop() closeOnClickOutside = false;\n\n  /**\n   * ARIA label for the icon\n   */\n  @Prop() ariaLabelIcon?: string;\n\n  /**\n   * ARIA label close or collapse button\n   */\n  @Prop() ariaLabelCollapseCloseButton?: string;\n\n  /**\n   * @internal\n   * Prevents overwriting of the variant and borderless property when used inside layout\n   */\n  @Prop() ignoreLayoutSettings: boolean = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) isMobile: boolean = false;\n\n  /**\n   * This event is triggered when the pane either expands or contracts\n   */\n  @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() variantChanged!: EventEmitter<VariantChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() borderlessChanged!: EventEmitter<BorderlessChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() hideOnCollapseChanged!: EventEmitter<HideOnCollapseChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() slotChanged!: EventEmitter<SlotChangedEvent>;\n\n  @State() private expandIcon = '';\n  @State() private showContent = false;\n  @State() private minimizeIcon = '';\n  @State() private floating = false;\n  @State() private parentWidthPx = 0;\n  @State() private parentHeightPx = 0;\n\n  private static readonly validPositions = ['top', 'left', 'bottom', 'right'];\n  private static readonly collapsedPane = '40px';\n  private static readonly collapsedPaneMobile = '48px';\n  private readonly animations: Map<string, JSAnimation> = new Map();\n  private animationCounter = 0;\n\n  private mutationObserver?: MutationObserver;\n  private resizeObserver?: ResizeObserver;\n  private disposableWindowClick?: DisposableEventListener;\n\n  get currentSlot() {\n    return this.hostElement.getAttribute('slot');\n  }\n\n  get isBottomTopPane() {\n    return this.composition === 'bottom' || this.composition === 'top';\n  }\n\n  get isLeftRightPane() {\n    return this.composition === 'left' || this.composition === 'right';\n  }\n\n  get isMobileTop() {\n    return this.composition === 'top' || this.composition === 'left';\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n    this.disposableWindowClick?.();\n  }\n\n  @Watch('expanded')\n  onExpandedChange() {\n    if (!this.closeOnClickOutside || !this.expanded) {\n      this.disposableWindowClick?.();\n      return;\n    }\n\n    this.disposableWindowClick = addDisposableEventListener(\n      window,\n      'click',\n      (event) => {\n        const path = event.composedPath?.() || [];\n        if (!path.includes(this.hostElement)) {\n          this.dispatchExpandedChangedEvent();\n        }\n      }\n    );\n  }\n\n  componentWillLoad() {\n    this.onExpandedChange();\n    this.setIcons();\n\n    this.floating = this.variant === 'floating';\n\n    if (this.expanded) {\n      this.onParentSizeChange();\n    }\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n\n    if (this.currentSlot) {\n      this.setPosition(this.currentSlot);\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'slot'\n        ) {\n          const newSlot = this.currentSlot;\n          const oldSlot = mutation.oldValue;\n\n          if (newSlot !== oldSlot) {\n            this.slotChanged.emit({\n              slot: oldSlot ?? '',\n              newSlot: newSlot ?? '',\n            });\n\n            if (newSlot) {\n              this.setPosition(newSlot);\n            }\n          }\n        }\n      });\n    });\n    this.mutationObserver.observe(this.hostElement, {\n      attributes: true,\n      attributeOldValue: true,\n    });\n\n    const parentElement = this.hostElement.parentElement;\n    this.resizeObserver = new ResizeObserver((entries) => {\n      this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n      this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n    });\n    if (parentElement) this.resizeObserver.observe(parentElement);\n  }\n\n  private setPosition(value: string) {\n    if (Pane.validPositions.includes(value)) {\n      this.composition = value as Composition;\n    }\n  }\n\n  private getExpandPaneSize() {\n    let expandPaneSize: string;\n\n    if (this.isBottomTopPane) {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentHeightPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n        }\n      }\n    } else {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentWidthPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n        }\n      }\n    }\n\n    return expandPaneSize;\n  }\n\n  private setIcons() {\n    const { expandIcon, minimizeIcon } = this.getIconNames();\n    this.expandIcon = expandIcon;\n    this.minimizeIcon = minimizeIcon;\n  }\n\n  private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n    let expandIcon = '';\n    let minimizeIcon = '';\n\n    switch (this.composition) {\n      case 'left':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        break;\n      case 'right':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        break;\n      case 'bottom':\n        expandIcon = iconDoubleChevronDown;\n        minimizeIcon = iconDoubleChevronUp;\n        break;\n      case 'top':\n        expandIcon = iconDoubleChevronUp;\n        minimizeIcon = iconDoubleChevronDown;\n        break;\n    }\n\n    return { expandIcon, minimizeIcon };\n  }\n\n  private getKey() {\n    return (this.animationCounter++).toString();\n  }\n\n  private animateVerticalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = animate(this.hostElement, {\n      duration: Animation.mediumTime,\n      width: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          this.animateVerticalPadding('0px');\n        } else {\n          this.animateVerticalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateHorizontalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = animate(this.hostElement, {\n      duration: Animation.mediumTime,\n      height: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      onBegin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          if (!this.isMobile) this.animateHorizontalPadding('0px');\n        } else {\n          if (!this.isMobile) this.animateHorizontalPadding('8px');\n        }\n      },\n      onComplete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private removePadding() {\n    animate(this.hostElement.shadowRoot!.querySelector('#title-div')!, {\n      duration: 0,\n      paddingTop: 0,\n      paddingBottom: 0,\n      paddingLeft: 0,\n      paddingRight: 0,\n      delay: 0,\n    });\n  }\n\n  private animateHorizontalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = animate(\n      this.hostElement.shadowRoot!.querySelector('#title-div')!,\n      {\n        duration: duration,\n        paddingTop: size,\n        paddingBottom: size,\n        easing: 'easeInOutSine',\n        delay: 0,\n        onComplete: () => {\n          this.animations.delete(key);\n        },\n      }\n    );\n\n    this.animations.set(key, animation);\n  }\n\n  private animateVerticalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = animate(\n      this.hostElement.shadowRoot!.querySelector('#title-div')!,\n      {\n        duration: duration,\n        paddingLeft: size,\n        paddingRight: size,\n        easing: 'easeInOutSine',\n        delay: 0,\n        onComplete: () => {\n          this.animations.delete(key);\n        },\n      }\n    );\n\n    this.animations.set(key, animation);\n  }\n\n  private clearAnimations() {\n    this.animations.forEach((animation) => animation.pause());\n    this.animations.clear();\n    this.animationCounter = 0;\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.hostElement.style.removeProperty('min-height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('composition')\n  onPositionChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('hideOnCollapse')\n  onHideOnCollapseChange(value: boolean) {\n    this.onParentSizeChange();\n\n    this.hideOnCollapseChanged.emit({\n      slot: this.currentSlot ?? '',\n      hideOnCollapse: value,\n    });\n  }\n\n  @Watch('variant')\n  onVariantChange(value: 'inline' | 'floating') {\n    this.floating = value === 'floating';\n\n    this.variantChanged.emit({\n      slot: this.currentSlot ?? '',\n      variant: value,\n    });\n  }\n\n  @Watch('borderless')\n  onBorderlessChange(value: boolean) {\n    this.borderlessChanged.emit({\n      slot: this.currentSlot ?? '',\n      borderless: value,\n    });\n  }\n\n  private dispatchExpandedChangedEvent() {\n    const event = this.expandedChanged.emit({\n      slot: this.currentSlot ?? '',\n      expanded: !this.expanded,\n    });\n\n    if (!event.defaultPrevented) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  @Watch('parentHeightPx')\n  @Watch('parentWidthPx')\n  onParentSizeChange() {\n    this.clearAnimations();\n    this.removePadding();\n\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.height = '100%';\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = expandPaneSize;\n          this.animateHorizontalPadding('8px', 0);\n        } else {\n          this.hostElement.style.width = expandPaneSize;\n          this.animateVerticalPadding('8px', 0);\n        }\n      }\n\n      this.showContent = true;\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        }\n      }\n    }\n  }\n\n  @Watch('expanded')\n  @Watch('size')\n  onSizeChange() {\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.minHeight = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n        this.animateHorizontalFadeIn('100%');\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateHorizontalFadeIn(expandPaneSize);\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateVerticalFadeIn(expandPaneSize);\n        }\n      }\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.animateHorizontalFadeIn(Pane.collapsedPane);\n        } else {\n          this.animateVerticalFadeIn(Pane.collapsedPane);\n        }\n      }\n    }\n  }\n\n  render() {\n    const rotate = !this.expanded && !this.isMobile && this.isLeftRightPane;\n    return (\n      <Host\n        class={{\n          'floating-pane': this.floating,\n          'inline-pane': !this.floating,\n          'mobile-overlay': this.expanded && this.isMobile,\n          'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n          'bottom-expanded':\n            this.expanded && !this.isMobileTop && this.isMobile,\n          'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n          'left-right-pane': this.isLeftRightPane && !this.isMobile,\n          [`${this.composition}-pane-border`]:\n            !this.borderless && !this.isMobile && !this.floating,\n          'nav-left-border':\n            !this.borderless &&\n            !this.isMobile &&\n            this.composition !== 'right' &&\n            this.floating,\n          'mobile-border-top':\n            !this.borderless &&\n            this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'mobile-border-bottom':\n            !this.borderless &&\n            !this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'not-visible': this.hideOnCollapse && !this.expanded,\n        }}\n        aria-expanded={a11yBoolean(this.expanded)}\n      >\n        <aside\n          id={`pane-${this.composition}`}\n          class={{\n            'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n            'left-right-pane': this.isLeftRightPane && !this.isMobile,\n            'mobile-pane': this.isMobile,\n            expanded: this.expanded,\n          }}\n        >\n          <div\n            id=\"title-div\"\n            class={{\n              title:\n                !this.isMobile && !this.hideOnCollapse && !this.showContent,\n              'title-finished':\n                !this.isMobile && !this.hideOnCollapse && this.showContent,\n              'title-expanded':\n                !this.isMobile && !this.hideOnCollapse && this.expanded,\n              'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n              'title-mobile': this.isMobile,\n              'header-gap': !this.isMobile && !this.hideOnCollapse,\n            }}\n          >\n            <ix-icon-button\n              class=\"title-icon\"\n              size=\"24\"\n              icon={\n                this.expanded\n                  ? this.isMobile || this.hideOnCollapse\n                    ? iconClose\n                    : this.expandIcon\n                  : this.minimizeIcon\n              }\n              iconColor={\n                this.expanded && (this.isMobile || this.hideOnCollapse)\n                  ? 'color-soft-text'\n                  : undefined\n              }\n              variant=\"subtle-tertiary\"\n              onClick={() => this.dispatchExpandedChangedEvent()}\n              aria-controls={`pane-${this.composition}`}\n              aria-label={this.ariaLabelCollapseCloseButton}\n            />\n            <div\n              class={{\n                'title-text': true,\n                rotate: rotate,\n              }}\n            >\n              {this.icon && (\n                <ix-icon\n                  class=\"pane-icon\"\n                  size=\"24\"\n                  name={this.icon}\n                  aria-label={this.ariaLabelIcon}\n                ></ix-icon>\n              )}\n              <div class=\"title-text-overflow\">\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              </div>\n              {this.expanded && (\n                <div class=\"slot-header\">\n                  <slot name=\"header\"></slot>\n                </div>\n              )}\n            </div>\n          </div>\n          <div class=\"side-pane-content\" hidden={!this.showContent}>\n            <slot></slot>\n          </div>\n        </aside>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/ix-slider.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-slider.entry.esm.js","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@use '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  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n\n  // Slider specific calculations\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n\n  // Theme colors:\n  --trace-reference-color: var(--theme-color-8); // Neu token\n  --trace-color: var(--theme-slider-trace--background);\n  --tick-color: var(--theme-slider-track-marker--background);\n  --tick-color--active: var(--theme-slider-trace-marker--background);\n  --track-color: var(--theme-slider-track--background);\n\n  @include component.ix-component;\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-slider-thumb--background--hover);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-slider-thumb--background--active);\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-slider-trace--background--invalid);\n  --tick-color--active: var(--theme-slider-trace-marker--background--invalid);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--invalid);\n  }\n\n  @include thumb-hover() {\n    background-color: var(--theme-slider-thumb--background--invalid--hover);\n  }\n\n  @include thumb-active() {\n    background-color: var(--theme-slider-thumb--background--invalid--active);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-slider-track--background--disabled);\n  --trace-color: var(--theme-slider-trace--background--disabled);\n  --tick-color: var(--theme-slider-track-marker--background--disabled);\n  --tick-color--active: var(--theme-slider-trace-marker--background--disabled);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--disabled);\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';\nimport { makeRef } from '../utils/make-ref';\nimport type { SliderMarker } from './slider.types';\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 * @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  private readonly thumbRef = makeRef<HTMLDivElement>();\n  private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n  get tooltip() {\n    return this.tooltipRef.current;\n  }\n\n  get pseudoThumb() {\n    return this.thumbRef.current;\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 && this.pseudoThumb) {\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 = parseFloat(this.slider.value);\n\n    if (!isNaN(value)) {\n      const oldValue = this.rangeInput;\n      this.rangeInput = value;\n\n      const { defaultPrevented } = this.emitInputEvent();\n\n      if (defaultPrevented) {\n        this.rangeInput = oldValue;\n        this.slider.value = oldValue.toString();\n      }\n    }\n  }\n\n  private emitInputEvent() {\n    return 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              ref={this.thumbRef}\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            ref={this.tooltipRef}\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n            for={this.thumbRef.waitForCurrent()}\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'} textColor=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-slider.entry.esm.js","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@use '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  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n\n  // Slider specific calculations\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n\n  // Theme colors:\n  --trace-reference-color: var(\n    --theme-slider-track-marker--background\n  ); // Neu token\n  --trace-color: var(--theme-slider-trace--background);\n  --tick-color: var(--theme-slider-track-marker--background);\n  --tick-color--active: var(--theme-slider-trace-marker--background);\n  --track-color: var(--theme-slider-track--background);\n\n  @include component.ix-component;\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-slider-thumb--background);\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-slider-thumb--background--hover);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-slider-thumb--background--active);\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-slider-trace--background--invalid);\n  --tick-color--active: var(--theme-slider-trace-marker--background--invalid);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--invalid);\n  }\n\n  @include thumb-hover() {\n    background-color: var(--theme-slider-thumb--background--invalid--hover);\n  }\n\n  @include thumb-active() {\n    background-color: var(--theme-slider-thumb--background--invalid--active);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-slider-track--background--disabled);\n  --trace-color: var(--theme-slider-trace--background--disabled);\n  --tick-color: var(--theme-slider-track-marker--background--disabled);\n  --tick-color--active: var(--theme-slider-trace-marker--background--disabled);\n\n  @include thumb {\n    background-color: var(--theme-slider-thumb--background--disabled);\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';\nimport { makeRef } from '../utils/make-ref';\nimport type { SliderMarker } from './slider.types';\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 * @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  private readonly thumbRef = makeRef<HTMLDivElement>();\n  private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n  get tooltip() {\n    return this.tooltipRef.current;\n  }\n\n  get pseudoThumb() {\n    return this.thumbRef.current;\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 && this.pseudoThumb) {\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 = parseFloat(this.slider.value);\n\n    if (!isNaN(value)) {\n      const oldValue = this.rangeInput;\n      this.rangeInput = value;\n\n      const { defaultPrevented } = this.emitInputEvent();\n\n      if (defaultPrevented) {\n        this.rangeInput = oldValue;\n        this.slider.value = oldValue.toString();\n      }\n    }\n  }\n\n  private emitInputEvent() {\n    return 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              ref={this.thumbRef}\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            ref={this.tooltipRef}\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n            for={this.thumbRef.waitForCurrent()}\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'} textColor=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/p-1ca58d8b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as s,g as a}from"./p-DGODjp4O.js";import{p as o,E as h,F as r,G as n,H as l}from"./p-Cz75KU1f.js";import{a as d}from"./p-DhE1t8Qh.js";import{A as p}from"./p-C5MWUgDN.js";import{a as c}from"./p-CzzcLSmV.js";import{m as b}from"./p-D_Hmobxf.js";import{a as m}from"./p-CKoABG1h.js";import{a as f}from"./p-Bb7pDeaQ.js";import"./p-BdCnOrqW.js";const g=":host(.floating-pane){--ix-pane--background:var(--theme-pane-floating--background);--ix-pane--border-color:var(--theme-pane-floating--border-color);--ix-pane--color:var(--theme-pane-floating--color);--ix-pane--box-shadow:var(--theme-pane-floating--box-shadow)}:host(.inline-pane){--ix-pane--background:var(--theme-pane-inline--background);--ix-pane--border-color:var(--theme-pane-inline--border-color);--ix-pane--color:var(--theme-pane-inline--color);--ix-pane--box-shadow:var(--theme-pane-inline--box-shadow)}:host{display:flex;position:relative;overflow:hidden;box-sizing:border-box;box-shadow:var(--ix-pane--box-shadow);background-color:var(--ix-pane--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host aside{width:100%;height:100%}:host .pane-icon{color:var(--ix-pane--color)}:host .slot-header-content{display:inline-block;position:relative;max-height:2rem}:host .title-text{display:flex;align-items:center;gap:var(--theme-space-1);overflow:hidden}:host .title-text .title-text-overflow{width:100%;height:100%;display:contents}:host .title-text .title-text-overflow *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .header-gap{gap:var(--theme-space-1)}:host .top-bottom-pane{display:flex;flex-direction:column;flex-grow:1}:host .top-bottom-pane .title{display:flex;flex-direction:row;align-items:center;margin:var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)}:host .top-bottom-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .top-bottom-pane .title-expanded{display:flex;flex-direction:row}:host .top-bottom-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane{display:flex;flex-grow:1}:host .left-right-pane .title{display:flex;flex-direction:column;align-items:center;margin:var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)}:host .left-right-pane .title .title-text{flex-direction:row-reverse;justify-content:start;flex-direction:row}:host .left-right-pane .title .rotate{writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);flex-direction:row-reverse}:host .left-right-pane .title .rotate ix-icon{transform:rotate(90deg)}:host .left-right-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane .title-expanded{display:flex;flex-direction:row}:host .left-right-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane.expanded{flex-direction:column}:host .mobile-pane{display:flex;flex-direction:column;flex-grow:1}:host .mobile-pane .title-mobile{display:flex;flex-direction:row-reverse;justify-content:space-between;margin:var(--theme-space-1) var(--theme-space-2)}:host .side-pane-content{padding:var(--theme-space-1) var(--theme-space-2) var(--theme-space-3) var(--theme-space-2);overflow:auto;height:100%;width:100%}:host .slot-header{max-height:2rem;max-width:unset}:host .slot-header.rotate{max-height:unset;max-width:2rem}:host(.not-visible){display:none}:host(.nav-left-border){border-left:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.left-pane-border){border-right:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.right-pane-border){border-left:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.top-pane-border){border-bottom:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.bottom-pane-border){border-top:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.mobile-overlay){width:100%;position:absolute;z-index:100 !important}:host(.mobile-overlay) .side-pane-content{height:calc(100% - 2.5rem)}:host(.mobile-border-top){border-bottom:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.mobile-border-bottom){border-top:var(--theme-app-header--border-width) solid var(--ix-pane--border-color)}:host(.top-expanded){top:0}:host(.bottom-expanded){bottom:0}:host(.left-right-pane){height:100%}:host(.top-bottom-pane){width:100%}";const v=class{constructor(i){t(this,i);this.expandedChanged=e(this,"expandedChanged",7);this.variantChanged=e(this,"variantChanged",7);this.borderlessChanged=e(this,"borderlessChanged",7);this.hideOnCollapseChanged=e(this,"hideOnCollapseChanged",7);this.slotChanged=e(this,"slotChanged",7);this.variant="inline";this.hideOnCollapse=false;this.size="240px";this.borderless=false;this.expanded=false;this.composition="top";this.closeOnClickOutside=false;this.ignoreLayoutSettings=false;this.isMobile=false;this.expandIcon="";this.showContent=false;this.minimizeIcon="";this.floating=false;this.parentWidthPx=0;this.parentHeightPx=0;this.animations=new Map;this.animationCounter=0}get currentSlot(){return this.hostElement.getAttribute("slot")}get isBottomTopPane(){return this.composition==="bottom"||this.composition==="top"}get isLeftRightPane(){return this.composition==="left"||this.composition==="right"}get isMobileTop(){return this.composition==="top"||this.composition==="left"}disconnectedCallback(){var t,e,i;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect();(i=this.disposableWindowClick)===null||i===void 0?void 0:i.call(this)}onExpandedChange(){var t;if(!this.closeOnClickOutside||!this.expanded){(t=this.disposableWindowClick)===null||t===void 0?void 0:t.call(this);return}this.disposableWindowClick=m(window,"click",(t=>{var e;const i=((e=t.composedPath)===null||e===void 0?void 0:e.call(t))||[];if(!i.includes(this.hostElement)){this.dispatchExpandedChangedEvent()}}))}componentWillLoad(){this.onExpandedChange();this.setIcons();this.floating=this.variant==="floating";if(this.expanded){this.onParentSizeChange()}this.isMobile=b("sm");c.onChange.on((()=>{this.isMobile=b("sm")}));if(this.currentSlot){this.setPosition(this.currentSlot)}this.mutationObserver=new MutationObserver((t=>{t.forEach((t=>{if(t.type==="attributes"&&t.attributeName==="slot"){const e=this.currentSlot;const i=t.oldValue;if(e!==i){this.slotChanged.emit({slot:i!==null&&i!==void 0?i:"",newSlot:e!==null&&e!==void 0?e:""});if(e){this.setPosition(e)}}}}))}));this.mutationObserver.observe(this.hostElement,{attributes:true,attributeOldValue:true});const t=this.hostElement.parentElement;this.resizeObserver=new ResizeObserver((t=>{this.parentWidthPx=t[0].borderBoxSize[0].inlineSize;this.parentHeightPx=t[0].borderBoxSize[0].blockSize}));if(t)this.resizeObserver.observe(t)}setPosition(t){if(v.validPositions.includes(t)){this.composition=t}}getExpandPaneSize(){let t;if(this.isBottomTopPane){if(this.size.includes("px")){const e=Math.round(this.parentHeightPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentHeightPx/2)}px`}else{t=`${Math.round(this.parentHeightPx/3)}px`}}}else{if(this.size.includes("px")){const e=Math.round(this.parentWidthPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentWidthPx/2)}px`}else{t=`${Math.round(this.parentWidthPx/3)}px`}}}return t}setIcons(){const{expandIcon:t,minimizeIcon:e}=this.getIconNames();this.expandIcon=t;this.minimizeIcon=e}getIconNames(){let t="";let e="";switch(this.composition){case"left":t=this.isMobile?h:l;e=this.isMobile?r:n;break;case"right":t=this.isMobile?r:n;e=this.isMobile?h:l;break;case"bottom":t=r;e=h;break;case"top":t=h;e=r;break}return{expandIcon:t,minimizeIcon:e}}getKey(){return(this.animationCounter++).toString()}animateVerticalFadeIn(t){let e=this.getKey();let i=d(this.hostElement,{duration:p.mediumTime,width:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;this.animateVerticalPadding("0px")}else{this.animateVerticalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}animateHorizontalFadeIn(t){let e=this.getKey();let i=d(this.hostElement,{duration:p.mediumTime,height:t,easing:"easeInOutSine",delay:0,onBegin:()=>{if(!this.expanded){this.showContent=false;if(!this.isMobile)this.animateHorizontalPadding("0px")}else{if(!this.isMobile)this.animateHorizontalPadding("8px")}},onComplete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}removePadding(){d(this.hostElement.shadowRoot.querySelector("#title-div"),{duration:0,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,delay:0})}animateHorizontalPadding(t,e=p.mediumTime){let i=this.getKey();let s=d(this.hostElement.shadowRoot.querySelector("#title-div"),{duration:e,paddingTop:t,paddingBottom:t,easing:"easeInOutSine",delay:0,onComplete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}animateVerticalPadding(t,e=p.mediumTime){let i=this.getKey();let s=d(this.hostElement.shadowRoot.querySelector("#title-div"),{duration:e,paddingLeft:t,paddingRight:t,easing:"easeInOutSine",delay:0,onComplete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}clearAnimations(){this.animations.forEach((t=>t.pause()));this.animations.clear();this.animationCounter=0}onMobileChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.hostElement.style.removeProperty("min-height");this.onParentSizeChange()}onPositionChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.onParentSizeChange()}onHideOnCollapseChange(t){var e;this.onParentSizeChange();this.hideOnCollapseChanged.emit({slot:(e=this.currentSlot)!==null&&e!==void 0?e:"",hideOnCollapse:t})}onVariantChange(t){var e;this.floating=t==="floating";this.variantChanged.emit({slot:(e=this.currentSlot)!==null&&e!==void 0?e:"",variant:t})}onBorderlessChange(t){var e;this.borderlessChanged.emit({slot:(e=this.currentSlot)!==null&&e!==void 0?e:"",borderless:t})}dispatchExpandedChangedEvent(){var t;const e=this.expandedChanged.emit({slot:(t=this.currentSlot)!==null&&t!==void 0?t:"",expanded:!this.expanded});if(!e.defaultPrevented){this.expanded=!this.expanded}}onParentSizeChange(){this.clearAnimations();this.removePadding();if(this.expanded){if(this.isMobile){this.hostElement.style.height="100%"}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=t;this.animateHorizontalPadding("8px",0)}else{this.hostElement.style.width=t;this.animateVerticalPadding("8px",0)}}this.showContent=true}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.hideOnCollapse?"0":v.collapsedPaneMobile}else{if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":v.collapsedPane}else{this.hostElement.style.width=this.hideOnCollapse?"0":v.collapsedPane}}}}onSizeChange(){if(this.expanded){if(this.isMobile){this.hostElement.style.minHeight=this.hideOnCollapse?"0":v.collapsedPaneMobile;this.animateHorizontalFadeIn("100%")}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":v.collapsedPane;this.animateHorizontalFadeIn(t)}else{this.hostElement.style.width=this.hideOnCollapse?"0":v.collapsedPane;this.animateVerticalFadeIn(t)}}}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=v.collapsedPaneMobile}else{if(this.isBottomTopPane){this.animateHorizontalFadeIn(v.collapsedPane)}else{this.animateVerticalFadeIn(v.collapsedPane)}}}}render(){const t=!this.expanded&&!this.isMobile&&this.isLeftRightPane;return i(s,{key:"ef43c572007deea4806b74a0bbb219767fd47839",class:{"floating-pane":this.floating,"inline-pane":!this.floating,"mobile-overlay":this.expanded&&this.isMobile,"top-expanded":this.expanded&&this.isMobileTop&&this.isMobile,"bottom-expanded":this.expanded&&!this.isMobileTop&&this.isMobile,"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,[`${this.composition}-pane-border`]:!this.borderless&&!this.isMobile&&!this.floating,"nav-left-border":!this.borderless&&!this.isMobile&&this.composition!=="right"&&this.floating,"mobile-border-top":!this.borderless&&this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"mobile-border-bottom":!this.borderless&&!this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"not-visible":this.hideOnCollapse&&!this.expanded},"aria-expanded":f(this.expanded)},i("aside",{key:"16489302e851cbe76ba44afab0620d6bab9a0937",id:`pane-${this.composition}`,class:{"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,"mobile-pane":this.isMobile,expanded:this.expanded}},i("div",{key:"2c2463000fc0219242e5f2b4a21bc4ff40d9a133",id:"title-div",class:{title:!this.isMobile&&!this.hideOnCollapse&&!this.showContent,"title-finished":!this.isMobile&&!this.hideOnCollapse&&this.showContent,"title-expanded":!this.isMobile&&!this.hideOnCollapse&&this.expanded,"title-hide-on-collapse":!this.isMobile&&this.hideOnCollapse,"title-mobile":this.isMobile,"header-gap":!this.isMobile&&!this.hideOnCollapse}},i("ix-icon-button",{key:"2757032c08f9940e0bd3e80c5bdae15ad8933630",class:"title-icon",size:"24",icon:this.expanded?this.isMobile||this.hideOnCollapse?o:this.expandIcon:this.minimizeIcon,iconColor:this.expanded&&(this.isMobile||this.hideOnCollapse)?"color-soft-text":undefined,variant:"subtle-tertiary",onClick:()=>this.dispatchExpandedChangedEvent(),"aria-controls":`pane-${this.composition}`,"aria-label":this.ariaLabelCollapseCloseButton}),i("div",{key:"df941e13a649fd2c79e4521ca4cda3f8e3383f17",class:{"title-text":true,rotate:t}},this.icon&&i("ix-icon",{key:"c6d6882ff9420ccc3ce630a609bd2d28da113393",class:"pane-icon",size:"24",name:this.icon,"aria-label":this.ariaLabelIcon}),i("div",{key:"9687bf7676a3ba96bb4fc642b6ee7342c745cc94",class:"title-text-overflow"},i("ix-typography",{key:"0396af3732054c841783aafde38e1e91b8ab5ff9",format:"h4"},this.heading)),this.expanded&&i("div",{key:"a0a1091307f143f928e5398992e143fc30f1fb44",class:"slot-header"},i("slot",{key:"989a4f1405dd0117d2f8857e5d52deab6ea84878",name:"header"})))),i("div",{key:"752b1123609ec6c2de3dba4d3648f3dc52efb4c7",class:"side-pane-content",hidden:!this.showContent},i("slot",{key:"e45f1124c23bdc394c06ae268dc97d4ff1936cc1"}))))}get hostElement(){return a(this)}static get watchers(){return{expanded:["onExpandedChange","onSizeChange"],isMobile:["onMobileChange"],composition:["onPositionChange"],hideOnCollapse:["onHideOnCollapseChange"],variant:["onVariantChange"],borderless:["onBorderlessChange"],parentHeightPx:["onParentSizeChange"],parentWidthPx:["onParentSizeChange"],size:["onSizeChange"]}}};v.validPositions=["top","left","bottom","right"];v.collapsedPane="40px";v.collapsedPaneMobile="48px";v.style=g;export{v as ix_pane};
+//# sourceMappingURL=p-1ca58d8b.entry.js.map

package/dist/siemens-ix/p-1ca58d8b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["registerInstance","createEvent","h","Host","getElement","iconClose","iconDoubleChevronUp","iconDoubleChevronDown","iconDoubleChevronRight","iconDoubleChevronLeft","animate","Animation","applicationLayoutService","matchBreakpoint","addDisposableEventListener","a11yBoolean","paneCss","Pane","constructor","hostRef","this","expandedChanged","variantChanged","borderlessChanged","hideOnCollapseChanged","slotChanged","variant","hideOnCollapse","size","borderless","expanded","composition","closeOnClickOutside","ignoreLayoutSettings","isMobile","expandIcon","showContent","minimizeIcon","floating","parentWidthPx","parentHeightPx","animations","Map","animationCounter","currentSlot","hostElement","getAttribute","isBottomTopPane","isLeftRightPane","isMobileTop","disconnectedCallback","_a","_b","_c","mutationObserver","disconnect","resizeObserver","disposableWindowClick","call","onExpandedChange","window","event","path","composedPath","includes","dispatchExpandedChangedEvent","componentWillLoad","setIcons","onParentSizeChange","onChange","on","setPosition","MutationObserver","mutations","forEach","mutation","type","attributeName","newSlot","oldSlot","oldValue","emit","slot","observe","attributes","attributeOldValue","parentElement","ResizeObserver","entries","borderBoxSize","inlineSize","blockSize","value","validPositions","getExpandPaneSize","expandPaneSize","referenceValue","Math","round","currentValue","Number","replace","getIconNames","getKey","toString","animateVerticalFadeIn","key","animation","duration","mediumTime","width","easing","delay","begin","animateVerticalPadding","complete","delete","set","animateHorizontalFadeIn","height","onBegin","animateHorizontalPadding","onComplete","removePadding","shadowRoot","querySelector","paddingTop","paddingBottom","paddingLeft","paddingRight","clearAnimations","pause","clear","onMobileChange","style","removeProperty","onPositionChange","onHideOnCollapseChange","onVariantChange","onBorderlessChange","defaultPrevented","collapsedPaneMobile","collapsedPane","onSizeChange","minHeight","render","rotate","class","id","title","icon","iconColor","undefined","onClick","ariaLabelCollapseCloseButton","name","ariaLabelIcon","format","heading","hidden","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,H as a,g as i}from"./p-DGODjp4O.js";import{b as o}from"./p-Bb7pDeaQ.js";import{O as s}from"./p-C97VdyAH.js";import{m as n}from"./p-bcj7UEIC.js";const l=':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(\n    --theme-slider-track-marker--background\n  );--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host 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-slider-thumb--background);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-slider-thumb--background);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-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}: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{}: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-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.error) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}';var c=undefined&&undefined.__decorate||function(e,t,r,a){var i=arguments.length,o=i<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,r):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,t,r,a);else for(var n=e.length-1;n>=0;n--)if(s=e[n])o=(i<3?s(o):i>3?s(t,r,o):s(t,r))||o;return i>3&&o&&Object.defineProperty(t,r,o),o};function h(e,t,r){if(t<e){return e}else if(t>r){return r}else{return t}}const d=class{constructor(r){e(this,r);this.valueChange=t(this,"valueChange",7);this.step=1;this.min=0;this.max=100;this.value=0;this.trace=false;this.traceReference=0;this.disabled=false;this.rangeInput=0;this.rangeMin=0;this.rangeMax=100;this.rangeTraceReference=0;this.showTooltip=false;this.thumbRef=n();this.tooltipRef=n()}get tooltip(){return this.tooltipRef.current}get pseudoThumb(){return this.thumbRef.current}get slider(){var e;return(e=this.hostElement.shadowRoot)===null||e===void 0?void 0:e.getElementById("slider")}onShowTooltipChange(){var e,t;if(this.showTooltip&&this.pseudoThumb){(e=this.tooltip)===null||e===void 0?void 0:e.showTooltip(this.pseudoThumb);return}(t=this.tooltip)===null||t===void 0?void 0:t.hideTooltip()}componentWillLoad(){this.a11yAttributes=o(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(e){e.stopPropagation();const t=parseFloat(this.slider.value);if(!isNaN(t)){const e=this.rangeInput;this.rangeInput=t;const{defaultPrevented:r}=this.emitInputEvent();if(r){this.rangeInput=e;this.slider.value=e.toString()}}}emitInputEvent(){return this.valueChange.emit(this.rangeInput)}isMarkerActive(e){const t=Math.min(this.traceReference,this.rangeInput);const r=Math.max(this.traceReference,this.rangeInput);const a=e;return a>=t&&a<=r}onPointerUp(){this.showTooltip=false}render(){const e=this.rangeMax-this.rangeMin;let t=(this.rangeTraceReference-this.rangeMin)/e;let i=(this.rangeInput-this.rangeMin)/e;const o=i-t;let s=t;let n=i;if(o<=0){s=i;n=t}return r(a,{key:"a81caafd7b8f63a37b7011370c3707906b1d73b1",class:{disabled:this.disabled,error:!!this.error},onPointerDown:()=>setTimeout((()=>this.showTooltip=true))},r("div",{key:"e944af2bafd5b248141a82840f06e51828cb22f2",class:"slider"},r("div",{key:"04f951c61ecbee406baf635ddfd0e7803209e293",class:"track"},r("div",{key:"2eb71a2a40ab802ca2eb03be2f0312e136e568f3",ref:this.thumbRef,class:"thumb",style:{left:`calc(${i} * 100% - 8px)`}}),r("div",{key:"ae0c97019fdbd3dae7751afb1f1d9f0e0a31ca8e",class:"ticks"},this.marker?this.marker.map((t=>{if(t>this.max||t<this.min){return}let a=(t-this.rangeMin)/e;return r("div",{class:{tick:true,"tick-active":this.isMarkerActive(t)&&this.trace},style:{"--tick-value":`${a}`}})})):null)),r("input",Object.assign({key:"de054139c483bd05507258e631eb57520b3f6643",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:e=>this.onInput(e),style:{"--value":`${i}`,"--trace-reference":`${t}`,"--trace-start":`${s}`,"--trace-end":`${n}`},class:{trace:this.trace&&t!==i,"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:"7812ffe4f03f6947e6e21984058f2207356ac779",ref:this.tooltipRef,class:{"hide-tooltip":!this.showTooltip},animationFrame:true,for:this.thumbRef.waitForCurrent()},this.rangeInput)),r("div",{key:"34c4e421d7371d8ca44e035cd5ffe3bf26c79f58",class:"label"},r("div",{key:"56c0ed549882f048fda2e1ecf6cdf340bfed34da",class:"label-start"},r("slot",{key:"912f1f85cbf81ddfca3717a8994c3db790168e75",name:"label-start"})),r("div",{key:"9f78dec87e05c98cbd8d675598244a9f9956a487",class:"label-end"},r("slot",{key:"d6bfbb945eca031efac18d68de7ef5611c58fafc",name:"label-end"}))),this.error?r("ix-typography",{class:"label-error",textColor:"alarm"},this.error):null)}get hostElement(){return i(this)}static get watchers(){return{showTooltip:["onShowTooltipChange"],value:["updateRangeVariables"],max:["updateRangeVariables"],min:["updateRangeVariables"],traceReference:["updateRangeVariables"]}}};c([s("pointerup",(e=>e.showTooltip))],d.prototype,"onPointerUp",null);d.style=l;export{d as ix_slider};
+//# sourceMappingURL=p-c8ad32c5.entry.js.map