@infineon/infineon-design-system-stencil 30.9.3--canary.1687.ab4e8489efcd565709719816bdff21db28c8e6f8.0 → 30.9.3--canary.1685.1b05745336b47e144082a3f99d5cfa5e669ab80e.0

package/dist/infineon-design-system-stencil/p-7fa8ccd3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","IfxSliderStyle0","IfxSlider","valueChanged","newValue","this","internalValue","updateValuePercent","minValueChanged","internalMinValue","maxValueChanged","internalMaxValue","getRangeSliderWrapper","rangeSliderWrapper","el","shadowRoot","querySelector","handleInputChangeOfRangeSlider","event","target","parseFloat","maxInputRef","value","minInputRef","id","ifxChange","emit","minVal","maxVal","updateZIndexIfRangeSlider","handleOnMouseLeaveOfRangeSlider","sliderWrapper","insertBefore","calculatePercentageValue","num","min","den","max","percentage","String","toFixed","handleInputChange","roundToValidStep","relativeValue","remainder","step","type","minPercent","parentElement","style","setProperty","maxPercent","inputRef","targetId","zIndex","componentWillLoad","undefined","Math","minValueHandle","maxValueHandle","componentDidLoad","render","h","key","class","leftText","leftIcon","icon","disabled","ref","onInput","onMouseUp","rightIcon","rightText","showPercentage"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n  display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 129px;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}