wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

package/dist/volt-basic-components/vds-basic-slider-continuous.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-slider-continuous.entry.esm.js","sources":["src/components/slider-continuous/vds-basic-slider-continuous.scss?tag=vds-basic-slider-continuous&encapsulation=shadow","src/components/slider-continuous/vds-basic-slider-continuous.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host(.vds-slider) {\n  display: block;\n  box-sizing: border-box;\n  --slider-track: var(--color-icon-medium);\n  --slider-track-fill: var(--color-icon-brand-default);\n  --slider-track-thumb: var(--color-icon-brand-default);\n  --slider-background:  var(--slider-track);\n\n  .vds-slider-continuous__container {\n    padding: var(--spacing-03);\n\n    &.vds-slider-continuous__container--orientation-vertical {\n      transform: rotate(270deg);\n      .vds-slider__value,\n      .slider-thumb {\n        transform: rotate(90deg);\n      }\n      .vds__tooltip-container-text {\n        direction: rtl;\n        text-align: right;\n        width: auto;\n      }\n      .vds-slider__value-reference span {\n        display: inline-block;\n        transform: rotate(90deg);\n      }\n    }\n\n    &.vds-slider-continuous__container--custom-colors {\n      .vds-slider-continuous__content {\n        .vds-slider-input:active {\n          opacity: 0.9;\n        }\n        &:hover {\n          .vds-slider-input {\n            opacity: 0.8;\n          }\n        }\n      }\n    }\n\n    .vds-slider-continuous__content {\n      &:has(.vds-slider-input:focus-visible) {\n        outline: 0.125rem solid var(--color-border-focus-2);\n        outline-offset: var(--spacing-06);\n      }\n    }\n\n    &.vds-slider-continuous__container--display-limits .vds-slider-continuous__content {\n      &:has(.vds-slider-input:focus-visible) {\n        outline: 0.125rem solid var(--color-border-focus-2);\n        outline-offset: var(--spacing-09);\n      }\n    }\n    &.vds-slider-continuous__container--colors {\n      .vds-slider-continuous__content {\n        &:has(.vds-slider-input:active) {\n          --slider-track-fill: var(--color-icon-brand-press);\n          --slider-track-thumb: var(--color-icon-brand-press);\n        }\n        &:hover {\n          --slider-track-fill: var(--color-icon-brand-hover);\n          --slider-track-thumb: var(--color-icon-brand-hover);\n        }\n      }\n    }\n    &.vds-slider-continuous__container--disabled {\n      --slider-track-fill: var(--color-icon-disabled);\n      --slider-track-thumb: var(--color-icon-disabled);\n    }\n    .vds-slider-continuous__content {\n      padding: 0 var(--spacing-03);\n    }\n    &.vds-slider-continuous__container--disabled {\n      pointer-events: none;\n    }\n    &.vds-slider-continuous__container--medium {\n      .vds-slider__track, input {\n        height: 0.25rem;\n      }\n      .vds-slider__value-reference-container >  .vds-slider__value-reference > span {\n        @include font-style(body, medium);\n      }\n      .vds-slider__thumb {\n        transform: translate(-50%, -8px);\n      }\n    }\n  \n    &.vds-slider-continuous__container--large {  \n      .vds-slider__track, input {\n        height: 0.375rem;\n      }\n      .vds-slider__value-reference-container >  .vds-slider__value-reference > span {\n        @include font-style(body, large);\n      }\n      .vds-slider__value-reference-container {\n        transform: translateY(1px);\n      }\n      .vds-slider__thumb {\n        transform: translate(-50%, -9px);\n      }\n    }\n\n    .slider-thumb::part(svg-icon) {\n      color: var(--slider-track-thumb);\n      fill: var(--slider-track-thumb);\n    }\n  }\n\n\n  .vds__tooltip-container {\n    display: none;\n    position: absolute;\n    width: 5.31rem;\n    height: 2.25rem;\n    height:max-content;\n    width: max-content;\n    max-width: var(--tooltip-max-width) !important;\n    flex-direction: column;\n    align-items: center;\n    border-radius: var(--radius-medium);\n    background: var(--surface-overlay-default);\n    padding: var(--spacing-03);\n    z-index: var(--elevation-layer-2);\n    box-shadow: var(--elevation-shadow-2);\n  }\n  .vds__tooltip-container-text{\n    color: var(--color-text-white-high);\n    font-feature-settings: 'clig' off, 'liga' off;\n    @include font-style(body, medium);\n  }  \n  .vds__tooltip-arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.25rem;\n    z-index: var(--elevation-layer-2);\n  }\n\n  .vds-slider__input {\n    position: relative;\n  }\n\n  .vds-slider-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    -webkit-appearance: none;\n    appearance: none; \n    width: 100%;\n    outline: none;\n    margin: 0;\n    background: transparent;\n    z-index: 3;\n    cursor: pointer;\n\n    &::-webkit-slider-thumb {\n      background-color: transparent;\n      opacity: 0;\n      cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n      background-color: transparent;\n      opacity: 0;\n      cursor: pointer;\n    }\n  }\n\n  .vds-slider__thumb {\n    position: absolute;\n    top: 0;\n    transform: translate(-50%, -8px);\n  }\n\n  .vds-slider__track {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    align-self: stretch;\n    width: 100%;\n    border-radius: var(--spacing-05);\n    background: var(--slider-background);\n    box-sizing: border-box;\n  }\n\n  .vds-slider__value-container  {\n    display: block;\n    position: relative;\n    .vds-slider__value-content {\n      position: absolute;\n      transform: translateY(-42px);\n      z-index: var(--elevation-layer-2); \n    }\n    .vds-slider__value {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      width: fit-content;\n      position: relative;\n    }\n    .vds__tooltip-container {\n      display: block;\n    }\n    .tooltip-arrow {\n      transform: translate(-50%, 21px);\n      position: absolute;\n      left: 50%;\n      fill: var(--surface-overlay-default);\n    }\n  }\n\n  .vds-slider__value-reference-container {\n    display: block;\n    .vds-slider__value-reference {\n      display: flex;\n      justify-content: space-between;\n      margin-top: var(--spacing-03);\n      \n      span {\n        overflow: hidden;\n        color: var(--color-text-medium);\n        text-align: right;\n        font-feature-settings: 'liga' off, 'clig' off;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    }\n  }\n}\n:host(.vds-slider--disabled) {\n  pointer-events: none;\n}\n","import { Component, EventEmitter, Host, Prop, h, Event, Method, Element } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { AttachInternals, forceUpdate, HTMLStencilElement, Listen, State, Watch } from '@stencil/core/internal';\nimport { getPositionBasedOnValue, getTrackFillBasedOnValue, logWarnings } from '../../utils/slider.utils';\n\n@Component({\n  tag: 'vds-basic-slider-continuous',\n  styleUrl: 'vds-basic-slider-continuous.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicSliderContinuous {\n  /** Sets the value of the slider..*/\n  @Prop() value: number;\n  /** Sets the size of the slider. */\n  @Prop() size: \"medium\" | \"large\" = \"medium\";\n  /** Sets the slider’s orientation. */\n  @Prop() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n  /** Sets the slider on disabled state. */\n  @Prop() disabled: boolean = false;\n  /** Sets the min value of the slider (Min value should always be lower than the max value). */\n  @Prop() minValue: number = 0;\n  /** Sets the max value of the slider..*/\n  @Prop() maxValue: number = 100;\n  /** Sets the amount of advance of the slider. */\n  @Prop() step: number;\n  /** Sets the aria label in slider */\n  @Prop() setAriaLabel: string;\n  /** Toggles the value over the thumb in the slider \n  * on - Always shows value over the thumb.\n  * off - Do not show the value over the thumb.\n  * auto - Shows value over the thumb when mouse hover.\n  */\n  @Prop() displayLabel: \"on\" | \"off\" | \"auto\" = \"on\";\n  /** Toggles the limit value (min and max) of the slider .*/\n  @Prop() displayLimits: boolean = true;\n  /** Sets colors of the slider.\n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   */\n  @Prop() colors: { [key: string]: string } | string;\n  /** Sets the thumb icon */\n  @Prop() icon: string = \"thumb\";\n\n  /**  Emits updated input value */\n  @Event() changeInput: EventEmitter<number>;\n\n  @Element() host: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @State() displayLabelShowValue: boolean;\n\n  componentWillRender(): void {\n    logWarnings(this.value, this.maxValue, this.minValue);\n    this.setDefaultValues();\n  }\n\n  componentDidRender(): void {\n    this.setOutboundValues();\n  }\n\n  componentDidLoad(): void {\n    this.setInputValue();\n    this.setThumbPositionOnFirstLoad();\n  }\n\n  /**\n   * Sets the slider value to the specified value.\n   *\n   * @param {number} value - The new value for the slider.\n   * @returns {Promise<void>} A promise that resolves when the value is set.\n   */\n  @Method()\n  setValue(value: number): Promise<void> {\n    this.value = value;\n    return Promise.resolve();\n  }\n\n  /**\n   * Clears the slider value by setting it to the minimum value.\n   *\n   * @returns {Promise<void>} A promise that resolves when the value is cleared.\n   */\n  @Method()\n  clear(): Promise<void> {\n    this.value = this.minValue;\n    return Promise.resolve();\n  }\n\n  /**\n   * Sets slider value, shownValue and internals value for forms.\n   * Calculates the thumb position based on the value.\n   * Sets the track fill percentage.\n   * \n   * @returns {void}\n   */\n  @Watch(\"value\")\n  setInputValue(): void {\n    const stringValue = this.value.toString();\n    this.thumbPosition = this.getValuePosition();\n    this.shownValue = stringValue;\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(stringValue);\n    }\n    if (this.trackContainerEl && !this.customBackground) {\n      this.trackContainerEl.style.background = getTrackFillBasedOnValue(this.value, this.maxValue, this.minValue);\n    }\n    this.changeInput.emit(this.value);\n  }\n\n  /**\n   * Updates the thumb position and forces a component update on window resize.\n   *\n   * @private\n   * @ListensTo(\"resize\", {target: \"window\"})\n   */\n  @Listen(\"resize\", {target: \"window\"})\n  updateThumbAndTrackPosition(): void {\n    this.thumbPosition = this.getValuePosition();\n    forceUpdate(this);\n  }\n\n  private inputRangeEl: HTMLInputElement;\n  private trackContainerEl: HTMLElement;\n  private shownValue: string;\n  private thumbPosition: string;\n  private customBackground: boolean;\n  /**\n   * Sets the initial value of the slider to the minimum value if no value is provided.\n   * When value is provided, shownValue gets set.\n   *\n   * @private\n   */\n  private setDefaultValues(): void {\n    if (this.value === undefined || this.value === null) {\n      this.value = this.minValue;\n      this.shownValue = this.minValue.toString();\n    } else {\n      this.shownValue = this.value.toString();\n    }\n  }\n\n  /**\n   * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.\n   *\n   * @private\n   */\n    private setOutboundValues(): void {\n      if (this.value < this.minValue || this.value > this.maxValue) {\n        this.value = this.minValue;\n        this.shownValue = this.minValue.toString();\n      }\n    }\n\n  /** \n   * This is necessary to avoid converting thumbPosition into a State variable. When Thumb is State, it will render the component twice on every value change.\n   * When it has value on the first load, the component need to be re-render (forceUpdate) since \n   * we need the width of the slider which is only available after the component finish the first render\n   * \n   * @private\n   * @returns {void}\n   */\n  private setThumbPositionOnFirstLoad(): void {\n    if (this.value > this.minValue) {\n      this.updateThumbAndTrackPosition();\n    }\n  }\n\n  /**\n   * Sets the value of the slider to the specified in the event.\n   *\n   * @private\n   * @param {InputEvent} evt - The event emitted by the input.\n   * @returns {void}\n   */\n  private handleInputChange(evt: InputEvent): void {\n    const target = evt.target as HTMLInputElement; \n    const value = Number(target.value);\n    this.setValue(value);\n  }\n\n  /**\n   * Sets the displayLabelShowValue to true when the mouse enters or focus the slider.\n   *\n   * @private\n   * @returns {void}\n   */\n  private handleInputMouseoverOrFocus() {\n    this.displayLabelShowValue = true;\n  }\n\n  /**\n   * Sets the displayLabelShowValue to false when the mouse leaves or blur the slider.\n   *\n   * @private\n   * @returns {void}\n   */\n  private handleInputMouseleaveOrBlur(): void {\n    this.displayLabelShowValue = false;\n  }\n\n  private getShowValue(): boolean {\n    let response = false;\n\n    switch(this.displayLabel) {\n      case \"off\":\n        response = false;\n        break;\n      case \"auto\":\n        response = this.displayLabelShowValue;\n        break;\n      case \"on\":\n        response = true;\n        break;\n      default:\n        response = false;\n    }\n\n    return response;\n  }\n\n  /**\n   * Calculates the CSS left position of the slider thumb based on the current value.\n   *\n   * @private\n   * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.\n   */\n  private getValuePosition(): string {\n    return getPositionBasedOnValue(this.inputRangeEl, this.host, this.maxValue, this.minValue, this.value, this.size);\n  }\n\n  /**\n   * Sets the custom colors for the slider based on the colors property.\n   * This colors have to be css variables by preferences that work in both dark and light mode.\n   * \n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   *\n   * @private\n   * @returns { [key: string]: string }\n   */\n  private setColors(): { [key: string]: string } {\n    const styles = {};\n    this.customBackground = false;\n    const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n\n    if (colors && colors[\"Track\"]) {\n      styles[\"--slider-track\"] = `var(--${colors[\"Track\"]})`;\n    }\n\n    if (colors && colors[\"TrackFill\"]) {\n      styles[\"--slider-track-fill\"] = `var(--${colors[\"TrackFill\"]})`;\n    }\n\n    if (colors && colors[\"Thumb\"]) {\n      styles[\"--slider-track-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n    }\n\n    if (colors && colors[\"Background\"]) {\n      styles[\"--slider-background\"] = `var(--${colors[\"Background\"]})`;\n      this.customBackground = true;\n    }\n\n    return styles;\n  }\n\n  private renderValueReferences(): HTMLStencilElement {\n\t\treturn (\n\t\t\t<div class=\"vds-slider__value-reference-container\">\n\t\t\t\t<div\n\t\t\t\t\tclass={combineClasses(\n\t\t\t\t\t\t\"vds-slider__value-reference\"\n\t\t\t\t\t)}\n\t\t\t\t>\n          <span>{this.minValue}</span>\n          <span>{this.maxValue}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n  private renderShownValue(): HTMLStencilElement {\n    return (\n      <div class={\"vds-slider__value-container\"}>\n        <div class=\"vds-slider__value-content\" style={{left: this.thumbPosition}}>\n          <div class=\"vds-slider__value\">\n            <div class={\"vds__tooltip-container\"}>\n              <span class={\"vds__tooltip-container-text\"}>{this.shownValue}</span>\n            </div>\n            {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderSlider() {\n    return (\n      <div class=\"vds-slider__input\">\n        <input\n          ref={(el): void => {\n            this.inputRangeEl = el;\n          }}\n          class={combineClasses(\n            \"vds-slider-input\"\n          )}\n          type=\"range\"\n          step={this.step}\n          onInput={(evt): void => this.handleInputChange(evt)}\n          onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n          onMouseLeave={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n          onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus()} : null}\n          onBlur={this.displayLabel === \"auto\" ? () => {this.handleInputMouseleaveOrBlur()} : null}\n          min={this.minValue}\n          max={this.maxValue}\n          value={this.value}\n          disabled={this.disabled}\n        />\n        <div class={`vds-slider__track`} ref={el => { if(el) this.trackContainerEl = el;}}></div>\n        <div class={\"vds-slider__thumb\"} style={{left: this.thumbPosition}}>\n          <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb\"></vds-icon>\n        </div>\n        {this.getShowValue() && this.renderShownValue()}\n      </div>\n    )\n  }\n\n  render() {\n    return (\n      <Host class={combineClasses(\"vds-slider\", this.disabled ? \"vds-slider--disabled\" : \"\")}>\n        <div \n          class={combineClasses(\n            \"vds-slider-continuous__container\",\n            `vds-slider-continuous__container--${this.size}`,\n            `vds-slider-continuous__container--orientation-${this.orientation}`,\n            this.colors ? \"vds-slider-continuous__container--custom-colors\" : \"vds-slider-continuous__container--colors\",\n            this.disabled ? \"vds-slider-continuous__container--disabled\" : \"\",\n            this.displayLimits ? \"vds-slider-continuous__container--display-limits\" : \"\"\n          )}\n          style={this.setColors()}\n        >\n          <div \n            class={combineClasses(\n              \"vds-slider-continuous__content\"\n            )}\n            aria-label={this.setAriaLabel}\n          >\n            {this.renderSlider()}\n          </div>\n          {this.displayLimits && this.renderValueReferences()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-basic-slider-range-continuous.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-basic-slider-range-continuous.entry.esm.js","sources":["src/utils/number-utils.ts","src/components/slider-range-continuous/vds-basic-slider-range-continuous.scss?tag=vds-basic-slider-range-continuous&encapsulation=shadow","src/components/slider-range-continuous/vds-basic-slider-range-continuous.tsx"],"sourcesContent":["export const hasDecimals = (val: number): boolean => !Number.isInteger(val);\n\nexport const countDecimalPlaces = (val: number): number => {\n    if (!hasDecimals(val)) return 0;\n\n    const decimalPart = val.toString().split(\".\")[1];\n\n    return decimalPart ? decimalPart.length : 0;\n};","@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  --slider-track: var(--color-icon-medium);\n  --slider-track-fill: var(--color-icon-brand-default);\n  --slider-track-start-thumb: var(--color-icon-brand-default);\n  --slider-track-end-thumb: var(--color-icon-brand-default);\n  --slider-background:  var(--slider-track);\n\n  .vds-slider-range__container {\n    padding: var(--spacing-03);\n\n    &.vds-slider-range__container--orientation-vertical {\n      transform: rotate(270deg);\n      .vds-slider-range__value,\n      .slider-thumb {\n        transform: rotate(90deg);\n      }\n      .vds__tooltip-container-text {\n        direction: rtl;\n        text-align: right;\n        width: auto;\n      }\n      .vds-slider-range__value-reference span {\n        display: inline-block;\n        transform: rotate(90deg);\n      }\n    }\n\n    &.vds-slider-range__container--medium {\n      .vds-slider-range,\n      .vds-slider-range__track,\n      .vds-slider-range__range,\n      .vds-slider-range-input__content,\n      .vds-slider-input {\n        height: 0.25rem;\n      }\n      .vds-slider-range__value-reference-container >  .vds-slider-range__value-reference > span {\n        @include font-style(body, medium);\n      }\n      .vds-slider-range__value-reference-container {\n        transform: translateY(3px);\n      }\n      .vds-slider-range__thumb {\n        transform: translate(-50%, -8px);\n      }\n      .vds-slider-input {\n        &::-webkit-slider-thumb {\n          width: 1.25rem;\n          height: 1.25rem;\n        }\n      }\n    }\n    &.vds-slider-range__container--large {\n      .vds-slider-range,\n      .vds-slider-range__track,\n      .vds-slider-range__range,\n      .vds-slider-range-input__content,\n      .vds-slider-input {\n        height: 0.375rem;\n      }\n      .vds-slider-range__value-reference-container >  .vds-slider-range__value-reference > span {\n        @include font-style(body, large);\n      }\n      .vds-slider-range__value-reference-container {\n        transform: translateY(1px);\n      }\n      .vds-slider-range__thumb {\n        transform: translate(-50%, -9px);\n      }\n      .vds-slider-input {\n        &::-webkit-slider-thumb {\n          width: 1.5rem;\n          height: 1.5rem;\n        }\n      }\n    }\n    .slider-start-thumb::part(svg-icon) {\n      color: var(--slider-track-start-thumb);\n      fill: var(--slider-track-start-thumb);\n    }\n    .slider-end-thumb::part(svg-icon) {\n      color: var(--slider-track-end-thumb);\n      fill: var(--slider-track-end-thumb);\n    }\n\n    .vds-slider-range__content {\n      position: relative;\n      padding: 0 var(--spacing-03);\n      .vds-slider-range-input__content {\n        position: relative;\n        padding: var(--spacing-03) 0;\n        cursor: pointer;\n        .vds-slider-range {\n          display: block;\n          position: absolute;\n          z-index: 2;\n          width: 100%;\n          align-items: center;\n          padding: var(--spacing-03) 0;\n          top: 0;\n    \n          .vds-slider-range__track {\n            position: absolute;\n            top: var(--spacing-03);\n            z-index: 2;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-radius: 5px;\n            background-color: var(--slider-track);\n          }\n    \n          .vds-slider-range__range {\n            position: absolute;\n            top: var(--spacing-03);\n            z-index: 3;\n            bottom: 0;\n            border-radius: 5px;\n            pointer-events: none;\n            background-color: var(--slider-track-fill);\n          }\n    \n          .vds-slider-range__thumb {\n            position: absolute;\n            top: var(--spacing-03);\n            z-index: 5;\n            border-radius: 50%;\n            pointer-events: none;\n          }\n        }\n        \n        .vds-slider-input {\n          position: absolute;\n          top: var(--spacing-03);\n          -webkit-appearance: none;\n          appearance: none;\n          pointer-events: none;\n          z-index: 3;\n          background: transparent;\n          width: 100%;\n          opacity: 0.8;\n          margin: 0;\n          animation: 0.3ms;\n\n          &:disabled {\n            pointer-events: none;\n            &::-webkit-slider-thumb {\n              pointer-events: none;\n            }\n          }\n\n          &:focus {\n            outline: none;\n          }\n      \n          &::-webkit-slider-runnable-track {\n            pointer-events: none;\n          }\n        \n          &::-webkit-slider-thumb {\n            pointer-events: auto;\n            box-sizing: border-box;\n            cursor: pointer;\n            border-radius: 50%;\n            -webkit-appearance: none;\n          }\n        }\n      }\n    }\n\n    .vds-slider-range__content {\n      &:has(.vds-slider-start-input:focus-visible) {\n        --slider-track-start-thumb: var(--color-icon-brand-press);\n      }\n    }\n\n    &.vds-slider-range-continuous__container--display-limits .vds-slider-range__content {\n      &:has(.vds-slider-start-input:focus-visible) {\n        --slider-track-start-thumb: var(--color-icon-brand-press);\n      }\n    }\n\n    .vds-slider-range__content {\n      &:has(.vds-slider-end-input:focus-visible) {\n        --slider-track-end-thumb: var(--color-icon-brand-press);\n      }\n    }\n\n    &.vds-slider-range-continuous__container--display-limits .vds-slider-range__content {\n      &:has(.vds-slider-end-input:focus-visible) {\n        --slider-track-end-thumb: var(--color-icon-brand-press);\n      }\n    }\n\n    &.vds-slider-range__container--colors {\n      .vds-slider-range__content {\n        &:has(.vds-slider-input:active) {\n          --slider-track-fill: var(--color-icon-brand-press);\n          --slider-track-start-thumb: var(--color-icon-brand-press);\n          --slider-track-end-thumb: var(--color-icon-brand-press);\n        }\n        &:hover {\n          --slider-track-fill: var(--color-icon-brand-hover);\n          --slider-track-start-thumb: var(--color-icon-brand-hover);\n          --slider-track-end-thumb: var(--color-icon-brand-hover);\n        }\n      }\n    }\n    &.vds-slider-range__container--disabled,\n    &.vds-slider-range__container--disabled:hover,\n    &.vds-slider-range__container--disabled:active {\n      --slider-track-fill: var(--color-icon-disabled);\n      --slider-track-start-thumb: var(--color-icon-disabled);\n      --slider-track-end-thumb: var(--color-icon-disabled);\n      --slider-track: var(--color-background-disabled);\n      pointer-events: none;\n    }\n    .vds-slider-range__value-container  {\n      display: block;\n      position: relative;\n      .vds-slider-range__value-content {\n        position: absolute;\n        transform: translate(-50%, -29px);\n        z-index: var(--elevation-layer-2); \n      }\n      .vds-slider-range__value {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        width: fit-content;\n        position: relative;\n        cursor: text;\n      }\n      .vds__tooltip-container {\n        display: block;\n      }\n      .tooltip-arrow {\n        transform: translate(-50%, 21px);\n        position: absolute;\n        left: 50%;\n        fill: var(--surface-overlay-default);\n      }\n    }\n    .vds-slider-range__value-reference-container {\n      display: block;\n      .vds-slider-range__value-reference {\n        display: flex;\n        justify-content: space-between;\n        \n        span {\n          overflow: hidden;\n          color: var(--color-text-medium);\n          text-align: right;\n          font-feature-settings: 'liga' off, 'clig' off;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n  .vds__tooltip-container {\n    display: none;\n    position: absolute;\n    width: 5.31rem;\n    height: 2.25rem;\n    height:max-content;\n    width: max-content;\n    max-width: var(--tooltip-max-width) !important;\n    flex-direction: column;\n    align-items: center;\n    border-radius: var(--radius-medium);\n    background: var(--surface-overlay-default);\n    padding: var(--spacing-03);\n    z-index: var(--elevation-layer-2);\n    box-shadow: var(--elevation-shadow-2);\n  }\n  .vds__tooltip-container-text{\n    color: var(--color-text-white-high);\n    font-feature-settings: 'clig' off, 'liga' off;\n    @include font-style(body, medium);\n  }  \n  .vds__tooltip-arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.25rem;\n    z-index: var(--elevation-layer-2);\n  }\n}\n:host(.vds-slider-range--disabled) {\n  pointer-events: none;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element, State, Method } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { getPositionBasedOnValue, logWarnings, SliderRangeValueType } from '../../utils/slider.utils';\nimport { forceUpdate, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport { countDecimalPlaces } from '../../utils/number-utils';\n\n@Component({\n  tag: 'vds-basic-slider-range-continuous',\n  styleUrl: 'vds-basic-slider-range-continuous.scss',\n  shadow: true,\n})\nexport class VdsBasicSliderRangeContinuous {\n  /** Sets the start value of the slider.*/\n  @Prop() startValue: number;\n  /** Sets the start value of the slider.*/\n  @Prop() endValue: number;\n  /** Sets the size of the slider. */\n  @Prop() size: \"medium\" | \"large\" = \"medium\";\n  /** Sets the slider’s orientation. */\n  @Prop() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n  /** Sets the slider on disabled state. */\n  @Prop() disabled: boolean = false;\n  /** Sets the min value of the slider (Min value should always be lower than the max value). */\n  @Prop() minValue: number = 0;\n  /** Sets the max value of the slider..*/\n  @Prop() maxValue: number = 100;\n  /** Sets the amount of advance of the slider. */\n  @Prop() step: number = 1;\n  /** Sets the aria label in slider */\n  @Prop() setAriaLabel: string;\n  /** Toggles the value over the thumb in the slider \n  * on - Always shows value over the thumb.\n  * off - Do not show the value over the thumb.\n  * auto - Shows value over the thumb when mouse hover.\n  */\n  @Prop() displayLabel: \"on\" | \"off\" | \"auto\" = \"on\";\n  /** Toggles the limit value (min and max) of the slider .*/\n  @Prop() displayLimits: boolean = true;\n  /** Sets colors of the slider.\n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   */\n  @Prop() colors: { [key: string]: string } | string;\n  /** Sets the thumb icon */\n  @Prop() icon: string = \"thumb\";\n\n  /**  Emits updated input value */\n  @Event() changeRangeValue: EventEmitter<{ startValue: number; endValue: number }>;\n\n  @Element() host: HTMLElement;\n\n  @State() displayLabelShowValue: boolean;\n\n  startInputRangeEl: HTMLInputElement;\n  endInputRangeEl: HTMLInputElement;\n  startShownValue: string;\n  endShownValue: string;\n  startThumbPosition: string;\n  endThumbPosition: string;\n  trackRangeFillContainerEl: HTMLDivElement;\n  trackContentContainerEl: HTMLDivElement;\n  displayLabelStartEventTriggerIn: \"mouseover\" | \"focus\";\n  displayLabelEndEventTriggerIn: \"mouseover\" | \"focus\";\n  hasFocus: boolean;\n\n  componentWillRender(): void {\n    logWarnings({start: this.startValue, end: this.endValue}, this.maxValue, this.minValue);\n    this.setDefaultValues();\n  }\n\n  componentDidRender(): void {\n    this.setOutboundValues();\n  }\n\n  componentDidLoad(): void {\n    this.setInputStartValue();\n    this.setInputEndValue();\n    forceUpdate(this);\n  }\n\n  /**\n   * Sets the slider startValue and endValue to the specified value.\n   *\n   * @param { startValue: number; endValue: number } values - The new values for the slider.\n   * @returns {Promise<void>} A promise that resolves when the value is set.\n   */\n  @Method()\n  setValues({startValue, endValue}: { startValue: number; endValue: number }): Promise<void> {\n    this.startValue = startValue;\n    this.endValue = endValue;\n    return Promise.resolve();\n  }\n\n  /**\n   * Gets the slider startValue and endValue.\n   *\n   * @returns {Promise<{ startValue: number; endValue: number }>} A promise that resolves the values.\n   */\n  @Method()\n  getValues(): Promise<{ startValue: number; endValue: number }> {\n    return Promise.resolve({startValue: this.startValue, endValue: this.endValue});\n  }\n\n  /**\n   * Clears the slider range values by setting it to the minimum and maximun value respectively.\n   *\n   * @returns {Promise<void>} A promise that resolves when the value is cleared.\n   */\n  @Method()\n  clear(): Promise<void> {\n    this.startValue = this.minValue;\n    this.endValue = this.maxValue;\n    return Promise.resolve();\n  }\n\n  /**\n   * Focus the slider range by focusing start slider.\n   *\n   * @returns {Promise<void>} A promise that resolves when the first slider is focused.\n   */\n  @Method()\n  setFocus(): Promise<void> {\n    this.startInputRangeEl.focus();\n    return Promise.resolve();\n  }\n\n  /**\n   * Sets slider startThumbPosition, startShownValue.\n   * Calculates the start thumb position based on the value.\n   * Emits changeRangeValue event\n   * \n   * @returns {void}\n   */\n  @Watch(\"startValue\")\n  setInputStartValue(): void {\n    const stringValue = this.startValue.toString();\n    this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);\n    this.startShownValue = stringValue;\n    this.changeRangeValue.emit({startValue: this.startValue, endValue: this.endValue});\n  }\n\n  /**\n   * Sets slider endThumbPosition, endShownValue.\n   * Calculates the end thumb position based on the value.\n   * Emits changeRangeValue event\n   * \n   * @returns {void}\n   */\n  @Watch(\"endValue\")\n  setInputEndValue(): void {\n    const stringValue = this.endValue.toString();\n    this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);\n    this.endShownValue = stringValue;\n    this.changeRangeValue.emit({startValue: this.startValue, endValue: this.endValue});\n  }\n\n  /**\n   * Updates the thumb position and forces a component update on window resize.\n   *\n   * @ListensTo(\"resize\", {target: \"window\"})\n   */\n  @Listen(\"resize\", {target: \"window\"})\n  updateThumbAndTrackPosition(): void {\n    this.startThumbPosition = this.getValuePosition(this.startValue, this.startInputRangeEl);\n    this.endThumbPosition = this.getValuePosition(this.endValue, this.endInputRangeEl);\n    forceUpdate(this);\n  }\n\n  /**\n   * Focus the first slider when displayLabel is set to auto.\n   *\n   * @ListensTo(\"focus\")\n   */\n  @Listen(\"focus\")\n  setFocusOnDisplayLabelAuto(): void {\n    if (this.displayLabel === \"auto\") {\n      this.setFocus();\n    }\n  }\n  \n  /**\n   * Sets the initial value of the slider to the minimum and maximum value when start and end value are not provided.\n   * When values are provided, shownValues get set.\n   *\n   * @private\n   */\n  private setDefaultValues(): void {\n    if (this.startValue === undefined || this.startValue === null) {\n      this.startValue = this.minValue;\n      this.startShownValue = this.minValue.toString();\n    } else {\n      this.startShownValue = this.startValue.toString();\n    }\n\n    if (this.endValue === undefined || this.endValue === null) {\n      this.endValue = this.maxValue;\n      this.endShownValue = this.maxValue.toString();\n    } else {\n      this.endShownValue = this.endValue.toString();\n    }\n  }\n\n  /**\n   * Sets the values of the slider to the minimum and maximum value when start and end value are out of bound.\n   *\n   * @private\n   */\n  private setOutboundValues(): void {\n    if (this.startValue < this.minValue) {\n      this.startValue = this.minValue;\n      this.startShownValue = this.minValue.toString();\n    }\n\n    if (this.endValue > this.maxValue) {\n      this.endValue = this.maxValue;\n      this.endShownValue = this.maxValue.toString();\n    }\n  }\n\n  /**\n   * Calculates the CSS left position of the slider thumb based on the current value.\n   *\n   * @private\n   * @params value - number\n   * @params inputRangeEl - HTMLInputElement\n   * @returns {string} The calculated left position of the slider thumb as a CSS pixel value.\n   */\n  private getValuePosition(value: number, inputRangeEl: HTMLInputElement): string {\n    return getPositionBasedOnValue(inputRangeEl, this.host, this.maxValue, this.minValue, value, this.size);\n  }\n\n  /**\n   * Sets the start/end value of the slider range to the specified in the event.\n   *\n   * @private\n   * @param {InputEvent} evt - The event emitted by the input.\n   * @param {SliderRangeValueType} rangeType - start | end slider.\n   * @returns {void}\n   */\n  private handleInputRangeChange(evt: InputEvent, rangeType: SliderRangeValueType): void {\n    const target = evt.target as HTMLInputElement; \n    const rawValue = Number(target.value);\n\n    if (rangeType === \"start\" && rawValue >= this.minValue) {\n      const value = Math.min(rawValue, this.endValue);\n      this.startValue = value;\n      this.startInputRangeEl.value = value.toString();\n    }\n\n    if (rangeType === \"end\"  && rawValue <= this.maxValue) {\n      const value = Math.max(rawValue, this.startValue);\n      this.endValue = value;\n      this.endInputRangeEl.value = value.toString();\n    }\n  }\n\n  /**\n   * Handles mouseover or focus events on the slider. \n   * Sets the `displayLabelShowValue` flag to `true` to indicate that the display label should show the value.\n   * \n   * @private\n   * @param {SliderRangeValueType} rangeType - The type of range (either \"start\" or \"end\").\n   * @param {\"mouseover\" | \"focus\"} eventTrigger - The type of event that triggered this function.\n   * @returns {void}\n   */\n  private handleInputMouseoverOrFocus(rangeType: SliderRangeValueType, eventTrigger: \"mouseover\" | \"focus\") {\n    this.displayLabelShowValue = true;\n\n    if (rangeType === \"start\") {\n      this.displayLabelStartEventTriggerIn = eventTrigger;\n      setTimeout(() => {\n        this.startInputRangeEl.focus();\n      });\n    }\n\n    if (rangeType === \"end\") {\n      this.displayLabelEndEventTriggerIn = eventTrigger;\n      this.endInputRangeEl.focus();\n    }\n  }\n\n  /**\n   * Handles mouseleave or blur events on the slider. \n   * Sets the `displayLabelShowValue` flag to `false` to hide the value in the display label.\n   * \n   * @private\n   * @param {SliderRangeValueType} rangeType - The type of range (either \"start\" or \"end\").\n   * @returns {void}\n   */\n  private handleInputMouseleaveOrBlur(rangeType: SliderRangeValueType): void {\n    this.displayLabelShowValue = false;\n\n    if (rangeType === \"start\") {\n      this.displayLabelStartEventTriggerIn = undefined;\n    }\n\n    if (rangeType === \"end\") {\n      this.displayLabelEndEventTriggerIn = undefined;\n    }\n  }\n\n  /**\n   * Handles click events on the slider track. \n   * Calculates the corresponding value based on the click position and updates the slider's start or end value accordingly.\n   * \n   * @private\n   * @param {MouseEvent} evt - The mouse event object.\n   * @returns {void}\n   */\n  private handleTrackClick(evt: MouseEvent) {\n\t\tif (!this.disabled) {\n\t\t\t// Calc the related value to the pixel that was clicked.\n\t\t\tlet valueFromPixel = (evt.offsetX * (this.maxValue - this.minValue)) / this.trackContentContainerEl.offsetWidth + this.minValue;\n      const decimalPlaces = countDecimalPlaces(this.step);\n\n      valueFromPixel = decimalPlaces === 0 ? Math.round(valueFromPixel) : parseFloat(valueFromPixel.toFixed(decimalPlaces));\n\n      const closestValue = [this.startValue, this.endValue].reduce((a, b) => {\n        return Math.abs(b - valueFromPixel) < Math.abs(a - valueFromPixel) ? b : a;\n      });\n\n      switch(true) {\n        case closestValue === this.startValue && closestValue === this.endValue && valueFromPixel < closestValue:\n          this.startValue = valueFromPixel;\n          break;\n        case closestValue === this.startValue && closestValue === this.endValue && valueFromPixel > closestValue:\n          this.endValue = valueFromPixel;\n          break;\n        case closestValue === this.startValue:\n          this.startValue = valueFromPixel;\n          break;\n        case closestValue === this.endValue:\n          this.endValue = valueFromPixel;\n          break;\n      }\n    }\n\t}\n\n  /**\n   * Determines whether the value should be displayed in the label based on the current displayLabel setting.\n   *\n   * @private\n   * @returns {boolean} - True if the value should be displayed, false otherwise.\n   */\n  private getShowValue(): boolean {\n    let response = false;\n\n    switch(this.displayLabel) {\n      case \"off\":\n        response = false;\n        break;\n      case \"auto\":\n        response = this.displayLabelShowValue;\n        break;\n      case \"on\":\n        response = true;\n        break;\n      default:\n        response = false;\n    }\n\n    return response;\n  }\n\n  /**\n   * Sets the custom colors for the slider based on the colors property.\n   * This colors have to be css variables by preferences that work in both dark and light mode.\n   * \n   * Track - ThemeColors\n   * TrackFill - ThemeColors\n   * Thumb - ThemeColors\n   * Background - ThemeColors - When specified, trackfill and track won't work. It will only be one background display.\n   *\n   * @private\n   * @returns { [key: string]: string }\n   */\n  private setColors(): { [key: string]: string } {\n    const styles = {};\n    const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n\n    if (colors && colors[\"Track\"]) {\n      styles[\"--slider-track\"] = `var(--${colors[\"Track\"]})`;\n    }\n\n    if (colors && colors[\"TrackFill\"]) {\n      styles[\"--slider-track-fill\"] = `var(--${colors[\"TrackFill\"]})`;\n    }\n\n    if (colors && colors[\"Thumb\"]) {\n      styles[\"--slider-track-start-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n      styles[\"--slider-track-end-thumb\"] = `var(--${colors[\"Thumb\"]})`;\n    }\n\n    if (colors && colors[\"Background\"]) {\n      styles[\"--slider-background\"] = `var(--${colors[\"Background\"]})`;\n    }\n\n    return styles;\n  }\n  \n  private renderShownValue(rangeType: SliderRangeValueType): HTMLStencilElement {\n    if (rangeType === \"start\") {\n      return (\n        <div class={\"vds-slider-range__value-container\"}>\n          <div class=\"vds-slider-range__value-content\" style={{left: this.startThumbPosition}}>\n            <div class=\"vds-slider-range__value\">\n              <div class={\"vds__tooltip-container\"}>\n                <span class={\"vds__tooltip-container-text\"}>{this.startShownValue}</span>\n              </div>\n              {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    if (rangeType === \"end\") {\n      return (\n        <div class={\"vds-slider-range__value-container\"}>\n          <div class=\"vds-slider-range__value-content\" style={{left: this.endThumbPosition}}>\n            <div class=\"vds-slider-range__value\">\n              <div class={\"vds__tooltip-container\"}>\n                <span class={\"vds__tooltip-container-text\"}>{this.endShownValue}</span>\n              </div>\n              {this.orientation !== \"vertical\" && <vds-icon class=\"tooltip-arrow\" svgIcon={\"caret-down-filled\"}></vds-icon>}\n            </div>\n          </div>\n        </div>\n      )\n    }\n  }\n\n  private renderValueReferences(): HTMLStencilElement {\n\t\treturn (\n\t\t\t<div class=\"vds-slider-range__value-reference-container\">\n\t\t\t\t<div\n\t\t\t\t\tclass={combineClasses(\n\t\t\t\t\t\t\"vds-slider-range__value-reference\"\n\t\t\t\t\t)}\n\t\t\t\t>\n          <span>{this.minValue}</span>\n          <span>{this.maxValue}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n  private renderSliders(): HTMLStencilElement {\n    return (\n      <div\n        class=\"vds-slider-range-input__content\"\n      >\n        <div\n          class={\"vds-slider-range\"}\n          onClick={(evt): void => this.handleTrackClick(evt)}\n          ref={(el) => {\n            if (el) {\n              this.trackContentContainerEl = el;\n            }\n          }}\n        >\n          <div class={\"vds-slider-range__track\"}></div>\n          <div\n            class={\"vds-slider-range__range\"}\n            style={{width: `calc(${this.endThumbPosition} - ${this.startThumbPosition})`, left: `${this.startThumbPosition}`}}\n            ref={(el) => {\n              this.trackRangeFillContainerEl = el;\n            }}\n          ></div>\n          <div\n            class={\"vds-slider-range__thumb vds-slider-range__thumb--start\"}\n            style={{left: `${this.startThumbPosition}`}}\n          >\n            <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb slider-start-thumb\"></vds-icon>\n          </div>\n          <div\n            class={\"vds-slider-range__thumb vds-slider-range__thumb--end\"}\n            style={{left: `${this.endThumbPosition}`}}\n          >\n            <vds-icon svgIcon={this.icon} size={this.size === \"medium\" ? \"1.25rem\" : \"1.5rem\"} class=\"slider-thumb slider-end-thumb\"></vds-icon>\n          </div>\n        </div>\n        <input\n          ref={(el): void => {\n            if (el) {\n              this.startInputRangeEl = el;\n            }\n          }}\n          class={combineClasses(\n            \"vds-slider-input\",\n            \"vds-slider-start-input\",\n            this.disabled ? \"vds-slider-input--disabled\" : \"\"\n          )}\n          type=\"range\"\n          step={this.step}\n          onInput={(evt): void => this.handleInputRangeChange(evt, \"start\")}\n          onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"start\", \"mouseover\")} : null}\n          onMouseLeave={this.displayLabel === \"auto\" && this.displayLabelStartEventTriggerIn === \"mouseover\" ? () => {this.handleInputMouseleaveOrBlur(\"start\")} : null}\n          onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"start\", \"focus\")} : null}\n          onBlur={this.displayLabel === \"auto\" && this.displayLabelStartEventTriggerIn === \"focus\" ? () => {this.handleInputMouseleaveOrBlur(\"start\")} : null}\n          min={this.minValue}\n          max={this.maxValue}\n          value={this.startValue}\n          disabled={this.disabled}\n        />\n        <input\n          ref={(el): void => {\n            if (el) {\n              this.endInputRangeEl = el;\n            }\n          }}\n          class={combineClasses(\n            \"vds-slider-input\",\n            \"vds-slider-end-input\",\n            this.disabled ? \"vds-slider-input--disabled\" : \"\"\n          )}\n          type=\"range\"\n          step={this.step}\n          onInput={(evt): void => this.handleInputRangeChange(evt, \"end\")}\n          onMouseOver={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"end\", \"mouseover\")} : null}\n          onMouseLeave={this.displayLabel === \"auto\" && this.displayLabelEndEventTriggerIn === \"mouseover\" ? () => {this.handleInputMouseleaveOrBlur(\"end\")} : null}\n          onFocus={this.displayLabel === \"auto\" ? () => {this.handleInputMouseoverOrFocus(\"end\", \"focus\")} : null}\n          onBlur={this.displayLabel === \"auto\" && this.displayLabelEndEventTriggerIn === \"focus\" ? () => {this.handleInputMouseleaveOrBlur(\"end\")} : null}\n          min={this.minValue}\n          max={this.maxValue}\n          value={this.endValue}\n          disabled={this.disabled}\n        />\n      </div>\n    );\n  }\n  \n  render() {\n    return (\n      <Host class={this.disabled ? \"vds-slider-range--disabled\" : \"\"}>\n        <div \n          class={combineClasses(\n            \"vds-slider-range__container\",\n            `vds-slider-range__container--${this.size}`,\n            `vds-slider-range__container--orientation-${this.orientation}`,\n            this.colors ? \"vds-slider-range__container--custom-colors\" : \"vds-slider-range__container--colors\",\n            this.disabled ? \"vds-slider-range__container--disabled\" : \"\",\n            this.displayLimits ? \"vds-slider-range__container--display-limits\" : \"\"\n          )}\n          style={this.setColors()}\n        >\n          <div\n            class={\"vds-slider-range__content\"}\n            aria-label={this.setAriaLabel}\n          >\n            {this.getShowValue() && this.renderShownValue(\"start\")}\n            {this.getShowValue() && this.renderShownValue(\"end\")}\n            {this.renderSliders()}\n          </div>\n          {this.displayLimits && this.renderValueReferences()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-chip.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-chip.entry.esm.js","sources":["src/components/chip/vds-chip.scss?tag=vds-chip&encapsulation=shadow","src/components/chip/vds-chip.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: inline-flex;\n  .vds__chip__container {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    background-color: transparent;\n    border-radius: var(--radius-pill);\n    border: none;\n    box-sizing: border-box;\n    box-shadow: 0 0 0 0.0625rem inset var(--color-border-brand);\n    color: var(--color-link-default);\n    font-feature-settings: 'clig' off, 'liga' off;\n\n    &.vds__chip__container--toggleable {\n      cursor: pointer;\n    }\n\n    &:hover {\n      background-color: var(--color-interaction-brand-lowest);\n    }\n    &:active, &:active:hover {\n      background-color: var(--color-interaction-brand-lower);\n    }\n\n    &:focus-visible {\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n    &.vds__chip__container--size-small {\n      padding: var(--spacing-01) var(--spacing-02);\n      @include font-style(title, 2x-small);\n    }\n    &.vds__chip__container--size-medium {\n      padding: var(--spacing-02) var(--spacing-03);\n      @include font-style(title, extra-small);\n    }\n    &.vds__chip__container--size-large {\n      padding: var(--spacing-03) var(--spacing-04);\n      @include font-style(title, small);\n    }\n    &.vds__chip__container--disabled,\n    &.vds__chip__container--disabled:focus-visible {\n      color: var(--color-text-disabled);\n      background-color: transparent;\n      pointer-events: none;\n      box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n      &.vds__chip__container--active {\n        color: var(--color-text-white-high);\n        background-color: var(--color-background-disabled);\n        box-shadow: none;\n      }\n    }\n    &.vds__chip__container--active {\n      color: var(--static-white);\n      background-color: var(--color-background-brand-default);\n      box-shadow: none;\n      &:hover {\n        background-color: var(--color-background-brand-hover);\n      }\n      &:active, :active:hover {\n        background-color: var(--color-background-brand-press);\n      }\n    }\n  }\n}\n\n:host-context(.vds-chip--disabled) {\n  pointer-events: none;\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State } from '@stencil/core/internal';\nimport { IconColors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { ICON_SIZE } from '../icon-button/vds-icon-button.utils';\n\n@Component({\n  tag: 'vds-chip',\n  styleUrl: 'vds-chip.scss',\n  shadow: true,\n})\nexport class VdsChip {\n  /** Sets chips content value */\n  @Prop({ reflect: true, mutable: true}) value: string;\n  /** Displays close icon */\n  @Prop() close: boolean;\n  /** Displays menu (chevron-down) icon */\n  @Prop() menu: boolean;\n  /** Displays chip in active state */\n  @Prop({ reflect: true, mutable: true}) active: boolean;\n  /** Sets chip to disabled */\n  @Prop() disabled: boolean;\n  /** Sets content size  */\n  @Prop() size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Defines the aria label on the close button  */\n  @Prop({ reflect: true }) closeAriaLabel: string;\n  /** They turn active on/off when clicking the chip */\n  @Prop() toggle: boolean = false;\n  /** Receives the icon name to be shown in the left side */\n  @Prop() informativeIcon: string;\n  /** When close button is clicked, the element is removed from the DOM */\n  @Prop() removeOnClose: boolean = true;\n\n  /** Fires after chip dismiss and hide */\n  @Event() afterClosed: EventEmitter<void>;\n  /** Fires when chip is selected (only works when toggle is enabled) */\n  @Event() selected: EventEmitter<void>;\n  /** Fires when menu-icon is clicked */\n  @Event() menuClick: EventEmitter<void>;\n\n  @Element() hostEl: HTMLVdsChipElement;\n\n  @State() _informativeIcon: string = undefined;\n\n  private iconColor: IconColors = \"color-icon-brand-default\";\n  private iconSize: string = ICON_SIZE[\"small\"];\n\n  /**\n   * Executes before every render cycle.\n   *\n   * @returns void\n   */\n  componentWillRender(): void {\n    this.setChipIconsColor();\n    this.setChipIconsSize();\n    this.setInformativeIcon();\n  }\n\n  /** \n   * Dismiss/Hide the chip.\n   * Emits afterClosed event\n   * \n   * @Returns Promise<void>\n   */\n  @Method()\n  dismiss(): Promise<void> {\n    return new Promise(resolve => {\n      this.afterClosed.emit();\n      if (this.removeOnClose) {\n        this.hostEl && this.hostEl.remove();\n      }\n      resolve();\n    });\n  }\n\n  /** \n   * Emits event when menu-icon is clicked\n   * \n   * @Returns void\n   */\n  private emitMenuClicked(): void {\n    this.menuClick.emit();\n  }\n\n  /** \n   * Sets informative icon based on the following herarchy\n   * When informativeIcon prop is provided it will always display.\n   * When Chip is toggle and active it will set informativeIcon to checkMarck (good)\n   * Otherwise it'll not be display.\n   * \n   * @Returns void\n   */\n  private setInformativeIcon(): void {\n    this._informativeIcon = this.informativeIcon ? this.informativeIcon : this.active && this.toggle ? \"good\" : undefined;\n  }\n\n  /**\n   * Sets the color for the icons inside the chip.\n   * Sets the chip's vds-icon colors\n   *\n   * @returns void\n   */\n  private setChipIconsColor(): void {\n    const state = this.disabled && this.active ? \"disabled-active\" : this.disabled ? \"disabled\" : this.active ? \"active\" : \"default\";\n    switch(state) {\n      case \"disabled-active\":\n        this.iconColor = \"color-icon-white-high\";\n        break;\n      case \"disabled\":\n        this.iconColor = \"color-icon-disabled\";\n        break;\n      case \"active\":\n        this.iconColor = \"white\";\n        break;\n      default:\n        this.iconColor = \"color-icon-brand-default\";\n        break;\n    }\n  }\n\n  private setChipIconsSize(): void {\n    switch(this.size) {\n      case \"small\": \n        this.iconSize = ICON_SIZE[\"extra-small\"];\n        break;\n      case \"medium\": \n        this.iconSize = ICON_SIZE[\"small\"];\n        break;\n      case \"large\": \n        this.iconSize = ICON_SIZE[\"medium\"];\n        break;\n    }\n  }\n\n  /**\n   * Changes the chip active state when toggle option is enabled.\n   * Add checks icon when informativeIcon is not provided\n   *\n   * @returns void\n   */\n  private handleChipClick(): void {\n    if (!this.toggle) return;\n    \n    this.active = !this.active;\n\n    this.setInformativeIcon();\n\n    this.selected.emit();\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-chip--disabled\" : \"\"}>\n        <button\n          onClick={() => this.handleChipClick()}\n          class={\n            combineClasses(\n              \"vds__chip__container\",\n              `vds__chip__container--size-${this.size}`,\n              this.toggle && \"vds__chip__container--toggleable\",\n              this.disabled && \"vds__chip__container--disabled\",\n              this.active && \"vds__chip__container--active\",\n            )\n          }\n          disabled={ this.disabled }\n        >\n          {this._informativeIcon && <vds-icon svgIcon={this._informativeIcon} color={this.iconColor} size={this.iconSize}></vds-icon>}\n          {this.value}\n          {this.menu && <vds-icon onClick={() => this.emitMenuClicked()} svgIcon={\"chevron-down\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n          {this.close && <vds-icon onClick={() => this.dismiss()} aria-label={this.closeAriaLabel} svgIcon={\"close\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-dialog-action-footer.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-action-footer.entry.esm.js","sources":["src/components/dialog-action-footer/vds-dialog-action-footer.scss?tag=vds-dialog-action-footer&encapsulation=shadow","src/components/dialog-action-footer/vds-dialog-action-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  padding-top: 1.5rem;\n}\n\n:host(.vds__dialog__footer--start) {\n  display: flex;\n  justify-content: start;\n  gap: var(--spacing-03);\n}\n\n:host(.vds__dialog__footer--end) {\n  display: flex;\n  justify-content: end;\n  gap: var(--spacing-03);\n}\n\n:host(.vds__dialog__footer--space-between) {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--spacing-03);\n}\n","import { Component, Host, h, Element, Event } from \"@stencil/core\";\nimport { EventEmitter, HTMLStencilElement } from \"@stencil/core/internal\";\n\n@Component({\n  tag: \"vds-dialog-action-footer\",\n  styleUrl: \"vds-dialog-action-footer.scss\",\n  shadow: true,\n})\nexport class VdsDialogActionFooter {\n\n  /** Emits event when closed button is clicked */\n  @Event() closeButton: EventEmitter<void>;\n\n  @Element() host: HTMLElement;\n\n  componentDidLoad(): void {\n    this.setClosebuttonEventEmitterToCloseDialogElements();\n  }\n\n   /**\n   * @private\n   * Sets up event listeners for the dialog children elements which has attribute close-dialog.\n   *\n   * - Listens for \"click\" events on the element and emits `closeButton`.\n   *\n   */\n   private setClosebuttonEventEmitterToCloseDialogElements(): void {\n    this.host.querySelectorAll(\"[close-dialog]\").forEach(el => {\n      el.addEventListener(\"click\", () => {\n        this.closeButton.emit();\n      });\n    });\n  } \n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"names":[],"mappings":";;AAAA,MAAM,wBAAwB,GAAG,m/9BAAm/9B;;MCQvg+B,qBAAqB,GAAA,MAAA;;;;;IAOhC,gBAAgB,GAAA;QACd,IAAI,CAAC,+CAA+C,EAAE;;AAGvD;;;;;;AAME;IACM,+CAA+C,GAAA;AACtD,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AACxD,YAAA,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;AAChC,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,aAAC,CAAC;AACJ,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

package/dist/volt-basic-components/vds-dialog-body.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-body.entry.esm.js","sources":["src/components/dialog-body/vds-dialog-body.scss?tag=vds-dialog-body&encapsulation=shadow","src/components/dialog-body/vds-dialog-body.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  overflow: auto;\n\n  .vds__dialog--body {\n    color: var(--color-text-medium);\n    @include font-style(body, large);\n    width: 100%;\n    overflow: auto;\n  }\n}\n","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-dialog-body',\n  styleUrl: 'vds-dialog-body.scss',\n  shadow: true,\n})\nexport class VdsDialogBody {\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={\"vds__dialog--body\"}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,+49BAA+49B;;MCQ359B,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,EAAA,EAC7B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

package/dist/volt-basic-components/vds-dialog-header.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-header.entry.esm.js","sources":["src/components/dialog-header/vds-dialog-header.scss?tag=vds-dialog-header&encapsulation=shadow","src/components/dialog-header/vds-dialog-header.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  padding-bottom: 1rem;\n\n  .vds__dialog__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex: 1 0 0;\n    align-self: stretch;\n\n    .vds__dialog__header--text {\n      color: var(--color-text-high);\n      @include font-style(title, large);\n    }\n  }\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-dialog-header',\n  styleUrl: 'vds-dialog-header.scss',\n  shadow: true,\n})\nexport class VdsDialogHeader {\n  /** Toggles show close button in dialog header */\n  @Prop() showCloseButton: boolean = true;\n\n  /** Emits event when closed button is clicked */\n  @Event() closeButton: EventEmitter<void>;\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={\"vds__dialog__header\"}>\n          <div class={\"vds__dialog__header--text\"}>\n            <slot></slot>\n          </div>\n          {this.showCloseButton && <vds-icon-button variant=\"secondary\" icon=\"close\" onClick={() => this.closeButton.emit()}></vds-icon-button>}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,sh+BAAsh+B;;MCQpi+B,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAOU,QAAA,IAAe,CAAA,eAAA,GAAY,IAAI;AAkBxC;IAbC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,eAAe,IAAI,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAoB,CAAA,CACjI,CACD;;;;;;;"}

package/dist/volt-basic-components/vds-dialog-modal.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog-modal.entry.esm.js","sources":["src/components/dialog-modal/vds-dialog-modal.scss?tag=vds-dialog-modal&encapsulation=shadow","src/components/dialog-modal/vds-dialog-modal.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  .vds__dialog__modal {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n  }\n}\n\n:host(.vds__dialog__modal--container) {\n  width: 100%;\n  height: 100%;\n}\n","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-dialog-modal',\n  styleUrl: 'vds-dialog-modal.scss',\n  shadow: true,\n})\nexport class VdsDialogModal {\n  render(): HTMLStencilElement {\n    return (\n      <Host class=\"vds__dialog__modal--container\">\n        <div class={\"vds__dialog__modal\"}>\n            <slot name=\"header\"></slot>\n            <slot />\n            <slot name=\"body\"></slot>\n            <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,s09BAAs09B;;MCQn19B,cAAc,GAAA,MAAA;;;;IACzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,EAC3B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACD;;;;;;;"}

package/dist/volt-basic-components/vds-dialog.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-dialog.entry.esm.js","sources":["src/components/dialog/vds-dialog.scss?tag=vds-dialog&encapsulation=shadow","src/components/dialog/vds-dialog.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  .vds__dialog__trigger {\n    display: inline-block;\n  }\n\n  .vds__dialog {\n    background-color: unset;\n    color: unset;\n    margin: auto;\n    border: none;\n    outline: none;\n    padding: 0;\n    &.vds__dialog__container--open {\n      display: flex;\n      justify-content: center;\n      padding: 1.3rem;\n    }\n    &.vds__dialog--backdrop::backdrop {\n      background: var(--color-interaction-black-lower);\n    }\n    &.vds__dialog--no-backdrop {\n      overlay: auto !important;\n      position: fixed;\n      inset-block-start: 0px;\n      inset-block-end: 0px;\n      user-select: text;\n      visibility: visible;\n      overflow: auto;\n    }\n  }\n\n  .vds__dialog__container {\n    display: flex;\n    max-width: 37.5rem;\n    padding: var(--spacing-07);\n    flex-direction: column;\n    align-items: flex-start;\n    border-radius: var(--radius-large);\n    background: var(--surface-medium);\n    position: relative;\n    z-index: var(--elevation-layer-3);\n    box-shadow:\n      var(--elevation-shadow-3),\n      inset 0 0 0 0.0625rem var(--color-border-lowest);\n\n    @each $key, $value in $spacing {\n      &.vds__dialog__spacing--spacing-#{$key} {\n        padding: var(--spacing-#{$key});\n      }\n    }\n  }\n}\n","import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State, Listen } from \"@stencil/core/internal\";\nimport { Spacing } from \"../../definitions/spacing\";\nimport { combineClasses } from \"../../utils/combine-classes\";\n\n@Component({\n  tag: \"vds-dialog\",\n  styleUrl: \"vds-dialog.scss\",\n  shadow: true,\n})\nexport class VdsDialog {\n  /** Sets the padding around the dialog */\n  @Prop() padding: Spacing = \"spacing-07\";\n  /** Toggles the background behind the dialog */\n  @Prop() backdrop: boolean = true;\n  /** Sets the width size of the dialog */\n  @Prop()  width: string = \"37.5rem\";\n  /** Sets the minimum width size of the dialog */\n  @Prop() minWidth: string = \"20rem\";\n  /** Sets the maximum width  size of the dialog */\n  @Prop() maxWidth: string = \"80%\";\n  /** Avoids user to close dialog by clicking outside */\n  @Prop() preventOutsideClose: boolean = false;\n\n  /** Emits the event when opens dialog */\n  @Event() opened: EventEmitter<string>;\n  /** Emits the event when opens dialog */\n  @Event() closed: EventEmitter<string>;\n\n  @State() isOpen: boolean = undefined;\n\n  @Element() host: HTMLElement;\n\n  private dialog: HTMLDialogElement;\n  private trigger: HTMLElement;\n\n  componentDidLoad(): void {\n    this.setHTMLElementEvents();\n  }\n\n  /**\n   * Opens the dialog element. This method displays the dialog modally\n   * with a backdrop if the `backdrop` property is set to `true`. Otherwise,\n   * it opens the dialog non-modally without a backdrop.\n   *\n   * @returns {Promise<void>} A promise that resolves when the dialog is opened.\n   */\n  @Method()\n  open(): Promise<void> {\n    this.isOpen = true;\n    this.backdrop ? this.dialog.showModal() : this.dialog.open = true;\n    this.opened.emit();\n    return Promise.resolve();\n  }\n\n  /**\n   * Closes the dialog element. This method hides the dialog.\n   *\n   * @returns {Promise<void>} A promise that resolves when the dialog is closed.\n   */\n  @Method()\n  close(): Promise<void> {\n    this.isOpen = false;\n    this.dialog.close();\n    this.closed.emit();\n    return Promise.resolve();\n  }\n\n  /**\n   * Returns the main element container of the dialog.\n   *\n   * @returns {Promise<HTMLDialogElement>} A promise that resolves returning the dialog main element.\n   */\n  @Method()\n  getContainer(): Promise<HTMLDialogElement> {\n    return Promise.resolve(this.dialog);\n  }\n\n  /**\n   * Listens for \"closeButton\" events on the children elements.\n   * This method calls the `close()` method to close the dialog when the button is clicked.\n   *\n   * @returns {void}\n   */\n  @Listen(\"closeButton\")\n  closeButtonHandle(): void {\n    this.close();\n  }\n\n  /**\n   * Listens for \"keydown\" events on the children elements, when the Escape key is press down\n   * it closes the dialog.\n   *\n   * @returns {void}\n   */\n  @Listen('keydown')\n  handleEscKey(ev: KeyboardEvent): void {\n    if (ev.key === \"Escape\"){\n      this.close();\n    }\n  }\n\n  /**\n   * Opens the dialog when the trigger element is clicked\n   *\n   * @returns {void}\n   */\n  handleClick(): void {\n    this.open();\n  }\n\n  /**\n   * Closes the dialog when the backdrop element is clicked.\n   * The HTMLDialog adds a ::backdrop element when is open with showDialog. This element returns as target\n   * the DIALOG element; when clicking on the content it returns the element that was click.\n   *\n   * @returns {void}\n   */\n  handleClose(evt: Event): void {\n    if (this.backdrop && !this.preventOutsideClose && (evt.target as HTMLElement).nodeName === \"DIALOG\") {\n      this.close();\n    }\n  }\n\n  /**\n   * @private\n   * Creates a styles object based on the component's properties (`width`, `minWidth`, `maxWidth`).\n   *\n   * @returns {Object} An object containing CSS styles for the component.\n   */\n  private setStyles(): { [key: string]: string } {\n    const styles: any = {};\n\n    styles.width = this.width;\n    styles.minWidth = this.minWidth;\n    styles.maxWidth = this.maxWidth;\n\n    return styles;\n  }\n\n  /**\n   * @private\n   * Sets up event listeners for the dialog component elements.\n   *\n   * - Listens for \"click\" events on the `trigger` element and calls `handleClick`.\n   * - Listens for \"click\" events on the `dialog` element and calls `handleClose`.\n   *\n   */\n  private setHTMLElementEvents(): void {\n    this.trigger.addEventListener(\"click\", this.handleClick.bind(this));\n    this.dialog.addEventListener(\"click\", this.handleClose.bind(this));\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div\n          ref={(el): void => {\n            if (el) {\n              this.trigger = el;\n            }\n          }}\n          class={\"vds__dialog__trigger\"}\n        >\n          <slot name=\"dialog-trigger\"></slot>\n        </div>\n        <dialog\n          ref={(el): void => {\n            if (el) {\n              this.dialog = el;\n            }\n          }}\n          style={{maxWidth: this.maxWidth}}\n          class={combineClasses(\n            \"vds__dialog\",\n            this.backdrop ? \"vds__dialog--backdrop\" : \"vds__dialog--no-backdrop\",\n            this.isOpen ? \"vds__dialog__container--open\" : \"\"\n          )}\n        >\n          <div\n              class={combineClasses(\n                \"vds__dialog__container\",\n                `vds__dialog__spacing--${this.padding}`\n              )}\n              style={this.setStyles()}\n            >\n              <slot></slot>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-footer.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-footer.entry.esm.js","sources":["src/components/footer/vds-footer.scss?tag=vds-footer&encapsulation=shadow","src/components/footer/vds-footer.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n@mixin footerText() {\n  color: var(--color-text-medium);\n  @include font-style(title, 2x-small);\n}\n\n:host {\n  display: block;\n\n  .vds__footer--container {\n    height: 1.25rem;\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-05);\n    padding: var(--spacing-03) var(--spacing-07);\n    background-color: var(--surface-lower);\n\n    .vds__footer--app-version {\n      @include footerText();\n      flex: 1 0 0;\n    }\n\n    .vds__footer--info {\n      @include footerText();\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1 0 0;\n\n      div {\n        display: flex;\n        align-items: center;\n      }\n\n      div.vds__footer--powerby {\n        margin-left: 0.5rem;\n\n        span {\n          margin-right: 0.25rem;\n        }\n      }\n    }\n\n    .vds__footer--slot {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      flex: 1 0 0;\n    }\n  }\n\n  .vds__footer--expandable {\n    height: auto;\n    overflow: hidden;\n    padding: var(--spacing-03) var(--spacing-07);\n    background-color: var(--surface-lower);\n\n    &.top {\n      border-bottom: 1px solid var(--color-border-low);\n    }\n\n    &.bottom {\n      border-top: 1px solid var(--color-border-low);\n    }\n  }\n\n  .vds__footer--slot-start,\n  .vds__footer--slot-center,\n  .vds__footer--slot-end {\n    display: flex;\n    align-items: center;\n    flex: 1;\n  }\n\n  .vds__footer--slot-start {\n    justify-content: flex-start;\n  }\n\n  .vds__footer--slot-center {\n    justify-content: center;\n  }\n\n  .vds__footer--slot-end {\n    justify-content: flex-end;\n  }\n}\n\n@media only screen and (max-width: 77.4375rem) {\n  :host > .vds__footer--container > .vds__footer--info > div.vds__footer--powerby {\n    display: none;\n  }\n}\n\n@media only screen and (max-width: 56.5rem) {\n  :host {\n    .vds__footer--container {\n      .vds__footer--slot {\n        flex: 0;\n\n        > *:not(.vds__footer--expand-button) {\n          display: none;\n        }\n\n        &:not(.has-expandable-button) {\n          display: none;\n        }\n      }\n\n      .vds__footer--info,\n      .vds__footer--slot-center {\n        justify-content: flex-end;\n      }\n\n      .vds__footer--slot-end {\n        display: none;\n      }\n    }\n  }\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Element, State } from '@stencil/core/internal';\nimport { setNodeObserver } from '../../utils/node-utils';\n\n@Component({\n  tag: 'vds-footer',\n  styleUrl: 'vds-footer.scss',\n  shadow: true,\n})\nexport class VdsFooter {\n  /**\n   *  Sets the type for the footer, expandable shows an extra layer of the footer.\n   *  Default is only what is visible.\n   *  and custom allows to set the content of the footer.\n   */\n  @Prop() type: 'default' | 'expandable' | 'custom' = 'default';\n  /** Sets the app version to be display in the footer */\n  @Prop() appVersion: string;\n  /** Sets the expanded content position, default is bottom */\n  @Prop() expandedContentPosition: 'top' | 'bottom' = 'bottom';\n  /** Defines the text in the central block of the footer */\n  @Prop({ mutable: true }) centralText: string = 'Wabtec Corporation. All rights reserved.';\n  /** Modify the text in the \"powered by\" section of the footer */\n  @Prop() poweredByText: string = 'Powered by';\n\n  @Element() host: HTMLStencilElement;\n\n  @State() isExpanded: boolean = false;\n\n  private currentYear: number;\n  private observer: MutationObserver;\n\n  componentWillRender(): void {\n    this.setFooterOptions();\n  }\n\n  componentWillLoad(): void {\n    this.setCurrentYear();\n  }\n\n  componentDidLoad(): void {\n    this.observer = setNodeObserver(this.setFooterOptions, this.host, this);\n  }\n\n  disconnectedCallback(): void {\n    this.observer.disconnect();\n  }\n\n  private setFooterOptions(): void {\n    if (this.type !== 'custom') {\n      Array.from(this.host.children).forEach(child => {\n        if (child.nodeName !== 'VDS-LINK' && child.slot !== 'expandable-content') {\n          child.remove();\n        }\n      });\n    }\n    this.setSeparators();\n  }\n\n  private setSeparators(): void {\n    const linkElements = Array.from(this.host.children).filter(\n      (child: HTMLElement) => child.nodeName === 'VDS-LINK',\n    );\n    if (linkElements.length <= 1) return;\n    for (let i = linkElements.length - 1; i > 0; i--) {\n      const divider = document.createElement('vds-divider');\n      divider.setAttribute('orientation', 'vertical');\n      divider.setAttribute('padding', 'spacing-01');\n      divider.style.setProperty('height', '1.25rem');\n      this.host.insertBefore(divider, linkElements[i]);\n    }\n  }\n\n  private setCurrentYear(): void {\n    this.currentYear = new Date().getFullYear();\n  }\n\n  private toggleExpand(): void {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  private renderExpandableButton(): HTMLStencilElement {\n    if (this.type === 'expandable') {\n      return (\n        <vds-icon-button\n          class=\"vds__footer--expand-button\"\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={() => this.toggleExpand()}\n          icon={this.isExpanded ? 'chevron-up' : 'chevron-down'}\n        />\n      );\n    }\n  }\n\n  private renderCustomFooter(): HTMLElement {\n    return (\n      <div class=\"vds__footer--container\">\n        <div class=\"vds__footer--slot-start\">\n          <slot name=\"start\" />\n        </div>\n        <div class=\"vds__footer--slot-center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"vds__footer--slot-end\">\n          <slot name=\"end\" />\n        </div>\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        {this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (\n          <div class=\"vds__footer--expandable top\">\n            <slot name=\"expandable-content\" />\n          </div>\n        )}\n        {this.type === 'custom' ? (\n          this.renderCustomFooter()\n        ) : (\n          <div class={'vds__footer--container'}>\n            <div class={'vds__footer--app-version'}>{this.appVersion}</div>\n            <div class={'vds__footer--info'}>\n              <div>© {this.currentYear} {this.centralText}</div>\n              <div class={'vds__footer--powerby'}>\n                <span>{this.poweredByText}</span>\n                <vds-icon size=\"2.95775rem,1rem\" color=\"color-icon-medium\" svgIcon={'wabtec-grey-logo'}></vds-icon>\n              </div>\n            </div>\n            <div class={`vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}`}>\n              <slot />\n              {this.renderExpandableButton()}\n            </div>\n          </div>\n        )}\n        {this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (\n          <div class=\"vds__footer--expandable bottom\">\n            <slot name=\"expandable-content\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-header.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-header.entry.esm.js","sources":["src/components/header/vds-header.scss?tag=vds-header&encapsulation=shadow","src/components/header/vds-header.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: block;\n\n  .vds__header {\n    display: flex;\n    padding: var(--spacing-02) var(--spacing-07);\n    align-items: center;\n    gap: var(--spacing-03);\n    flex: 1 0 0;\n    align-self: stretch;\n    border-radius: var(--radius-sharp);\n    background: var(--surface-lower);\n    justify-content: end;\n\n    &--content-section {\n      display: flex;\n      width: 100%;\n      justify-content: end;\n      & > * {\n        color: var(--color-text-medium);\n        font-feature-settings: 'clig' off, 'liga' off;\n        @include font-style(title, extra-small);\n      }\n    }\n\n    &--app-name {\n      display: flex;\n      max-width: 1110px;\n      height: var(--spacing-09);\n      padding: var(--spacing-00);\n      justify-content: flex-start;\n      align-items: center;\n      gap: var(--spacing-00);\n      flex-shrink: 0;\n    }\n\n    &--app-name--content {\n      color: var(--color-text-medium);\n      font-feature-settings: 'clig' off, 'liga' off;\n      @include font-style(title, extra-small);\n    }\n\n    &--user-section {\n      display: flex;\n      position: relative;\n      padding: var(--spacing-00) var(--spacing-02);\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--spacing-02);\n      align-self: stretch;\n      text-wrap: nowrap;\n  \n      &:hover {\n        border-radius: var(--radius-medium);\n        background: var(--color-interaction-black-lowest);\n      }\n  \n      &:focus {\n        border: solid;\n        border-color: var(--color-border-focus-2);\n        border-radius: var(--radius-medium);\n      }\n    }\n\n    &--user-section-username {\n      align-items: center;\n      display: flex;\n      color: var(--color-text-medium);\n      font-feature-settings: 'clig' off, 'liga' off;\n      @include font-style(title, extra-small);\n      white-space: nowrap;\n    }\n\n    &--user-section-avatar {\n      cursor: pointer;\n    }\n\n    &--user-section-action-icon {\n      align-items: center;\n      display: flex;\n      width: var(--spacing-06);\n      height: var(--spacing-06);\n      border-radius: var(--radius-medium);\n      cursor: pointer;\n    }\n  }\n  .d-flex {\n    display: flex;\n  }\n\n  .vds__header--user-section-menu-container {\n    display: none;\n  }\n\n  .vds__header--user-section-menu-container-opened {\n    display: block;\n    position: absolute;\n    right: -1.5rem;\n    top: var(--spacing-08);\n    z-index: 3;\n\n    .vds__header--user-section-menu-container-content {\n      margin-top: 6px;\n      background: var(--surface-neutral-default);\n      padding: var(--spacing-06) var(--spacing-05);\n      border-radius: var(--radius-medium);\n      box-shadow: 0px 6px 6px 0px #1D2E401A;\n    }\n\n    span .triangle-rotated {\n      transform: rotate(180deg);\n      margin-right: 24px;\n      margin-bottom: 6px;\n    }\n\n    .vds__header--arrow-right-align {\n      display: flex;\n      justify-content: flex-end;\n      position: absolute;\n      top: 0;\n      right: 8px;\n      z-index: 1;\n    }\n  }\n}","import { Component, Host, Listen, Prop, State, h, Element, Watch } from '@stencil/core';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n\n@Component({\n  tag: 'vds-header',\n  styleUrl: 'vds-header.scss',\n  shadow: true,\n})\nexport class VdsHeader {\n  /** Defines app name for header */\n  @Prop() value: string;\n  /** Defines the value in the avatar component */\n  @Prop() avatar: string;\n  /** Defines the username at the left of the avatar */\n  @Prop() username!: string;\n  /** Allow hide/show User-Section */\n  @Prop() showUserSection: boolean = true;\n\n  @Element() hostEl: HTMLElement;\n\n  @State() popupOpened: boolean = false;\n\n  @Listen(\"click\", { target: \"window\" })\n\thandleClickOut(evt): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;\n    }\n\t}\n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private floatingMenuElementRef: HTMLElement;\n\n  private floatingCleanUp: () => void;\n\n  componentDidLoad(){\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--user-section-action-icon');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--arrow-right-align');\n  }\n\n  private handleClick(_evt: MouseEvent): void {\n    _evt.stopPropagation();\n    _evt.preventDefault();\n    this.popupOpened = !this.popupOpened;\n  }\n\n  @Watch(\"popupOpened\")\n  async handlePopupOpened(): Promise<void> {\n    if (this.popupOpened) {\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, \"bottom-start\", false);\n    } else {\n      this.floatingCleanUp && this.floatingCleanUp();\n    }\n  }\n\n  render() {\n    const showUserSection = this.showUserSection;\n    return (\n      <Host>\n        <header class={`vds__header`}>\n          <div class={`vds__header--app-name`}>\n            <span class=\"vds__header--app-name--content\">{this.value}</span>\n          </div>\n          <div class=\"vds__header--content-section\">\n            <slot name=\"contentSection\"></slot>\n          </div>\n          { showUserSection && <div class={`vds__header--user-section`}>\n            <span class=\"vds__header--user-section-username\">{this.username}</span>\n            <div class=\"d-flex\" onClick={(evt: MouseEvent) => {\n                this.handleClick(evt);\n              }}>\n              <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n              <span class=\"vds__header--user-section-action-icon\">\n                <vds-icon svgIcon=\"caret-down-filled\" size=\"20px\" color=\"color-icon-medium\"></vds-icon>\n              </span>\n            </div>\n\n            <div\n              ref={(el) => {\n                if (el) {\n                  this.floatingMenuElementRef = el;\n                }\n              }}\n              class={`${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}`}>\n              <span class=\"vds__header--arrow-right-align\">\n                <svg class=\"triangle-rotated\" width=\"13\" height=\"6\" viewBox=\"0 0 13 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path id=\"popover-carret-filled-large\" d=\"M0.5 0L6.5 6L12.5 0H0.5Z\" fill=\"var(--surface-neutral-default)\"/>\n                </svg>\n              </span>\n              <div\n                class=\"vds__header--user-section-menu-container-content\"\n              >\n                <slot name=\"profilePopupContent\"></slot>\n              </div>\n            </div>\n          </div> }\n        </header>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-key-value-pair.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-key-value-pair.entry.esm.js","sources":["src/components/key-value-pair/vds-key-value-pair.scss?tag=vds-key-value-pair&encapsulation=shadow","src/components/key-value-pair/vds-key-value-pair.tsx"],"sourcesContent":["@include typographyClasses();\n\n:host {\n  display: block;\n  width: fit-content;\n  height: fit-content;\n\n  --vds-key-value-pair-gap: var(--spacing-03);\n  --vds-key-value-pair-label-gap: var(--spacing-03);\n  --vds-key-value-pair-value-gap: var(--spacing-03);\n\n  --vds-key-value-pair-text-label-color: var(--color-text-medium);\n  --vds-key-value-pair-text-value-color: var(--color-text-high);\n  \n  .vds-key-value-pair__container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vds-key-value-pair-gap);\n    \n    &.label-position--bottom {\n      flex-direction: column-reverse;\n    }\n    \n    .label__container {\n      display: flex;\n      justify-content: space-between;\n      gap: var(--vds-key-value-pair-label-gap);\n      \n      .label {\n        color: var(--vds-key-value-pair-text-label-color);\n        word-break: break-word;\n      }\n    }\n    \n    .value__container {\n      display: flex;\n      align-items: center;\n      gap: var(--vds-key-value-pair-value-gap);\n      \n      .value {\n        color: var(--vds-key-value-pair-text-value-color);\n        word-break: break-word;\n      }\n    } \n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Typography } from '../../definitions/typography';\n\n@Component({\n  tag: 'vds-key-value-pair',\n  styleUrl: 'vds-key-value-pair.scss',\n  shadow: true,\n})\nexport class VdsKeyValuePair {\n  /** Set the position for the label */\n  @Prop() labelPosition: 'top' | 'bottom' = 'top';\n\n  /** Set the label value */\n  @Prop() label: string;\n\n  /** Set the size of the label */\n  @Prop() labelSize: Typography = 'body-medium';\n\n  /** Define the value content */\n  @Prop() value: string;\n\n  /** Define the text value size based on the vds font mixing */\n  @Prop() valueSize: Typography = 'headline-small';\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={`vds-key-value-pair__container label-position--${this.labelPosition}`}>\n          <div class=\"label__container\">\n            <span class={`label vds-font-${this.labelSize}`}>{this.label}</span>\n            <slot name=\"label-slot\"></slot>\n          </div>\n          <div class=\"value__container\">\n            <span class={`value vds-font-${this.valueSize}`}>{this.value}</span>\n            <slot name=\"value-slot\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,oiiCAAoiiC;;MCSljiC,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAa,CAAA,aAAA,GAAqB,KAAK;;AAMvC,QAAA,IAAS,CAAA,SAAA,GAAe,aAAa;;AAMrC,QAAA,IAAS,CAAA,SAAA,GAAe,gBAAgB;AAkBjD;IAhBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiD,8CAAA,EAAA,IAAI,CAAC,aAAa,CAAE,CAAA,EAAA,EAC/E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAkB,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA,CAAE,EAAG,EAAA,IAAI,CAAC,KAAK,CAAQ,EACpE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAkB,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA,CAAE,EAAG,EAAA,IAAI,CAAC,KAAK,CAAQ,EACpE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,CACF,CACD;;;;;;;"}

package/dist/volt-basic-components/vds-notification.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-notification.entry.esm.js","sources":["src/components/notification/vds-notification.scss?tag=vds-notification&encapsulation=shadow","src/components/notification/vds-notification.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  .vds__notification--container {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--spacing-03);\n    padding: var(--spacing-04) var(--spacing-05) var(--spacing-04) var(--spacing-03);\n    border-radius: var(--radius-medium);\n    min-width: fit-content;\n  }\n  .vds__notification--container-body {\n    display: flex;\n    gap: var(--spacing-03);\n  }\n  .vds__notification--information{\n    display: flex;\n    align-items: center;\n    align-content: center;\n    flex: 1 1 auto;\n    flex-wrap: wrap;\n\n    &.vds-notification__information--toast {\n      flex-direction: column;\n      align-items: start;\n      .vds__notification--message,\n      .vds__notification--title {\n        width: 100%;\n      }\n    }\n    .vds__notification--title{      \n      @include font-style(title, medium);\n      padding-right: var(--spacing-02);\n      align-self: flex-start;\n      ::slotted(h1),\n      ::slotted(h2),\n      ::slotted(h3),\n      ::slotted(h4),\n      ::slotted(h5),\n      ::slotted(h6) {\n        margin-block-start: 0;\n        margin-block-end: 0;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n      }\n    }\n    .vds__notification--message{\n      flex: 1 1 auto;\n      overflow-wrap: break-word;\n      @include font-style(body, medium);\n      color: var(--color-text-medium);\n      box-sizing: border-box;\n      min-height: var(--spacing-06);\n    }\n  }\n  .vds__notification--icon{\n    align-self: flex-start;\n  }\n  .vds__notification--content{\n    display: flex;\n    flex-direction: column;\n\n    ::slotted([slot=\"actions\"]) {\n      padding-top: var(--spacing-07);\n    }\n  }\n  .vds__notification--actions{\n    color: var(--color-text-medium);\n    padding: var(--spacing-00) var(--spacing-03) var(--spacing-00) var(--spacing-05);\n    align-self: flex-start;\n    @include font-style(body, medium);\n\n    &.vds-notification__actions--toast {\n      padding: var(--spacing-00);\n    }\n  }\n  .vds__notification--close-btn{\n    color: var(--color-text-medium);\n    padding: 0;\n    align-self: flex-start;\n    display: flex;\n  }\n  .vds__notification--status-informative{\n    background-color: var(--color-background-information-lowest-default);\n    box-shadow: inset 0 0 0 0.0625rem var(--color-border-information);\n    .vds__notification--title{\n      color: var(--color-text-information-high);\n    }\n  }\n  .vds__notification--status-warning{\n    background-color: var(--color-background-warning-lowest-default);\n    box-shadow: inset 0 0 0 0.0625rem var(--color-border-warning);\n    .vds__notification--title{\n      color: var(--color-text-warning-high);\n    }\n  }\n  .vds__notification--status-danger{\n    background-color: var(--color-background-danger-lowest-default);\n    box-shadow: inset 0 0 0 0.0625rem var(--color-border-danger);\n\n    .vds__notification--title{\n      color: var(--color-text-danger-high);\n    }\n  }\n  .vds__notification--status-healthy{\n    background-color: var(--color-background-healthy-lowest-default);\n    box-shadow: inset 0 0 0 0.0625rem var(--color-border-healthy);\n    .vds__notification--title{\n      color: var(--color-text-healthy-high);\n    }\n  }\n  .vds__notification--status-custom{\n    background-color: var(--notification-background);\n    box-shadow: inset 0 0 0 0.0625rem var(--notification-border);\n  }\n  .vds-notification__close-area {\n    display: flex;\n  }\n}","import { Component, Host, h, Prop, State,Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { NotificationsCustomColors, NotificationStatus } from './vds-notification-utils';\n\n@Component({\n  tag: 'vds-notification',\n  styleUrl: 'vds-notification.scss',\n  shadow: true,\n})\nexport class VdsNotification {\n/** Define variant of the notification */\n@Prop({mutable: true}) variant: \"toast\" | \"inline\" = \"inline\";\n/** Define status type of the notification */\n@Prop({mutable: true}) status: NotificationStatus = \"informative\";\n/** Define custom status color of notification */\n@Prop({mutable: true}) colors?: NotificationsCustomColors;\n/** Define custom Icon for the notification */  \n@Prop({mutable: true}) icon?: string;\n/** Show / Hide the notification close button */\n@Prop({mutable: true}) showCloseButton: boolean = true;\n/** When set to true, the element will be removed from DOM when pressing the close button. */\n@Prop({mutable: true}) removeOnClose: boolean = true;\n\n@State() currentIcon: string = undefined;\n@State() currentColor: Colors = undefined;\n\n@Element() hostEl: HTMLElement;\n\n/** Emits event when popover gets closed */\n@Event() closed: EventEmitter<void>;\n\n\nprivate setCustomBackground(customization): { [key: string]: string } {\n  return customization?.background ? { '--notification-background': `var(--${customization.background})` } : {};\n}\n\nprivate setCustomBorder(customization): { [key: string]: string } {\n  return customization?.border ? { '--notification-border': `var(--${customization.border})` } : {};\n}\nprivate setCustomIcon(customization): { [key: string]: string } {\n  return customization?.icon ? { '--notification-icon-color': `var(--${customization.icon})` } : {};\n}\nprivate setCustomColors(): { [key: string]: string } {\n  const customization = this.colors;\n  if (!customization) {\n        return null;\n    }\n    return {\n        ...this.setCustomBackground(customization),\n        ...this.setCustomBorder(customization),\n        ...this.setCustomIcon(customization)\n    };\n}\n\nprivate setIcon(){\n  switch (this.status) {\n    case 'informative':\n      this.currentIcon = 'information';\n      this.currentColor = \"color-icon-information\";\n      break;\n    case 'danger':\n      this.currentIcon = 'information';\n      this.currentColor= 'color-icon-danger';\n      break;\n    case 'warning':\n      this.currentIcon = 'caution';\n      this.currentColor= 'color-icon-warning';\n      break;\n    case 'healthy':\n      this.currentIcon = 'healthy';\n      this.currentColor= 'color-icon-healthy';\n      break;\n    case 'custom':\n      this.currentIcon = this.icon;\n      this.currentColor= this.colors?.icon? this.colors.icon : null;\n      break;\n    default:\n      this.currentIcon = 'unknown';\n      this.currentColor= 'color-icon-information';\n      break;\n  }\n}\n\nprivate handleClose(){\n this.closed.emit();\n if (this.removeOnClose) {\n   this.hostEl.remove();\n }\n}\n/* Close the Notification from other element  */ \n@Method()\npublic async close(): Promise<void> {\n  this.handleClose();\n}\n\nprivate showCloseBtn(){\n  return (this.showCloseButton ?\n    (<div class=\"vds__notification--close-btn\">\n      <vds-icon-button \n        size=\"medium\" \n        variant=\"secondary\" \n        icon='close'\n        setAriaLabel='close'\n        onClick={() => this.handleClose()}\n      >        \n      </vds-icon-button>\n    </div>)\n    :null);\n}\n  private renderActions(): HTMLStencilElement {\n    return (\n      <div\n        class={`vds__notification--actions ${this.variant === \"toast\" ? \"vds-notification__actions--toast\" : \"\"}`}\n      >\n        <slot name=\"actions\"></slot>\n      </div>\n    );\n  }\n\nrender(): HTMLStencilElement {\n  const custom = this.colors? this.setCustomColors() : null;\n  this.setIcon();\n\n  return (\n  <Host style={custom}>\n    <div class={combineClasses(\n      'vds__notification--container',\n      'vds__notification--status-'+ this.status,\n      )}\n    >\n      <div class={\"vds__notification--container-body\"}>\n        <div class=\"vds__notification--icon\">\n          <vds-icon size=\"1.5rem\" svgIcon={this.currentIcon} color={this.currentColor}></vds-icon>\n        </div>\n        <div class=\"vds__notification--content\">\n          <div class={`vds__notification--information ${this.variant === \"toast\" ? \"vds-notification__information--toast\" : \"\"}`}>\n            <div class=\"vds__notification--title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <div class=\"vds__notification--message\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n          {this.variant === \"toast\" && this.renderActions()}\n        </div>\n      </div>\n      <div class=\"vds-notification__close-area\">\n        {this.variant === \"inline\" && this.renderActions()}\n        {this.showCloseBtn()}\n      </div>\n    </div>\n  </Host>\n  );\n}\n}"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-popover.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-popover.entry.esm.js","sources":["src/components/popover/vds-popover.scss?tag=vds-popover&encapsulation=shadow","src/components/popover/vds-popover.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: fit-content;\n  .vds__popover-container {\n    display: none;\n    position: absolute;\n    width: var(--popover-max-width);\n    height: var(--popover-max-height);\n    flex-direction: column;\n    align-items: center;\n    border-radius: var(--radius-medium);\n    box-shadow: var(--elevation-shadow-2);\n    z-index: var(--elevation-layer-2);\n    background-color: var(--surface-neutral-default);\n    padding: var(--popover-padding);\n  }\n\n  .vds__popover-arrow {\n    position: absolute;\n    width: 8px;\n    height: 4px;\n    z-index: 1;\n  }\n  .vds__popover-arrow-img {\n    fill: var(--surface-neutral-default);\n    display: flex;\n    width: 8px;\n    height: 4px;\n  }\n}\n","import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from '@stencil/core';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n@Component({\n  tag: 'vds-popover',\n  styleUrl: 'vds-popover.scss',\n  shadow: true,\n})\n\nexport class VdsPopover {\n  \n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the popover will be opened */\n  @Prop({mutable: true}) position: 'top' | 'bottom' | 'right' | 'left' = 'bottom';\n  /** Sets the maximum width of the popover’s content */\n  @Prop({mutable: true}) maxWidth: string;\n  /** Sets the maximum height of the popover’s content */\n  @Prop({mutable: true}) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({mutable: true}) event: 'hover' | 'click' = 'click';\n  /** Toggles padding inside popover. */\n  @Prop({mutable: true}) padding: 'default' | 'none' = 'default';\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   */\n  @Prop({mutable: true}) autoPosition: boolean = false;\n\n  @State() popupOpened: boolean = false;\n  \n  /** Emits event when popover gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when popover gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private floatingCleanUp: () => void;\n\n  @Watch(\"popupOpened\")\n  async emitValue(): Promise<void> {\n    if (this.popupOpened){\n      this.opened.emit();\n      this.popoverElementRef.style.display = 'inline-flex';\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.popoverElementRef, this.arrowElementRef, this.position, this.autoPosition);\n    }\n    else{\n      this.closed.emit();\n      this.popoverElementRef.style.display = 'none';\n      this.floatingCleanUp();\n    } \n  }\n\n  /* Close the popover when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;      \n    }\n  }\n\n  /* Open the popover with click on the trigger element  */\n  @Listen('click')\n  handleClick(event: Event): void {\n    if (this.event === 'click') {\n      const clickedElement = event.target as HTMLElement;\n      if (clickedElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n\n  /* Open the popover from other element  */ \n  @Method()\n  public async open(): Promise<void> {\n    this.popupOpened = true;\n  }\n\n  /* Close the popover from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.popupOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the popover\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__popover-container') as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = false; \n      }\n    }\n  }\n\n  private setPadding(){\n    return {'--popover-padding': this.padding === 'none' ? '0' : 'var(--spacing-06) var(--spacing-05) var(--spacing-06) var(--spacing-05)'}\n  }\n  private setMaxWidthAndHeight(){\n    return {'--popover-max-width': this.maxWidth, '--popover-max-height': this.maxHeight} \n  }\n  \n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private popoverElementRef: HTMLElement;\n  \n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-trigger');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-arrow');\n    this.popoverElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__popover-container');\n\n    window.addEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this)); \n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }  \n\n  render(): HTMLStencilElement { \n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        <div class=\"vds__popover-trigger\"\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);              \n          }}\n          ref={(triggerEl) => { if(triggerEl)this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"popover-trigger\"></slot>\n        </div>\n        <div\n          class=\"vds__popover-container\" \n          style={this.setPadding()}\n          ref={(popoverEl) => {  if(popoverEl)this.popoverElementRef = popoverEl; }}\n        >          \n          <slot name=\"popover-content\"></slot>\n          <div class=\"vds__popover-arrow\" ref={(popoverArrowEl) => {  if(popoverArrowEl)this.arrowElementRef = popoverArrowEl; }}>\n            <svg class=\"vds__popover-arrow-img\" width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"popover-caret-filled-small\" d=\"M0 0L4 4L8 0H0Z\" fill=\"var(--surface-neutral-default)\"/>\n            </svg>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-progress-linear.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-progress-linear.entry.esm.js","sources":["src/components/progress-linear/vds-progress-linear.scss?tag=vds-progress-linear&encapsulation=shadow","src/components/progress-linear/vds-progress-linear.tsx"],"sourcesContent":[":host {\n  display: block;\n  z-index: var(--elevation-layer-5);\n  --progress-linear-background-track: var(--color-background-information-lowest-default);\n  --progress-linear-background-track-fill: var(--color-background-information-default);\n  .vds-progress-linear__container {\n    position: relative;\n    height: 0.25rem;\n    width: 100%;\n    flex-shrink: 0;\n    overflow: hidden;\n    .vds-progress-linear__track {\n      position: absolute;\n      top: 0;\n      height: 0.25rem;\n      width: 100%;\n    }\n    .vds-progress-linear__track-fill {\n      position: absolute;\n      top: 0;\n      z-index: 2;\n      height: 0.25rem;\n      width: 0%;\n    }\n    &.vds-progress-linear__container--default-colors {\n      .vds-progress-linear__track {\n        background-color: var(--progress-linear-background-track);\n        &.vds-progress-linear__track--success {\n          --progress-linear-background-track: var(--color-background-information-lowest-default);\n        }\n        &.vds-progress-linear__track--error {\n          --progress-linear-background-track: var(--color-background-information-lowest-default);\n        }\n      }\n      .vds-progress-linear__track-fill {\n        background-color: var(--progress-linear-background-track-fill);\n        &.vds-progress-linear__track-fill--error {\n          --progress-linear-background-track-fill: var(--color-background-danger-default);\n        }\n        &.vds-progress-linear__track-fill--success {\n          --progress-linear-background-track-fill: var(--color-background-healthy-default);\n        }\n      }\n    }\n    &.vds-progress-linear__container--custom-colors {\n      .vds-progress-linear__track {\n        background-color: var(--progress-linear-background-track);\n      }\n      .vds-progress-linear__track-fill {\n        background-color: var(--progress-linear-background-track-fill);\n      }\n    }\n  }\n\n  @keyframes fillTrack {\n    0% {\n      left: 0%;\n      transform: translateX(-100%);\n    }\n    100% {\n      left: 100%;\n    }\n  }\n}\n","import { Component, Host, Prop, Watch, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-progress-linear',\n  styleUrl: 'vds-progress-linear.scss',\n  shadow: true,\n})\nexport class VdsProgressLinear {\n  /** Sets the percentage filled number for determinate mode from 0 to 100 */\n  @Prop() value: number;\n  /** Defines the color based on the status: \n   * error -> color-background-critical-default,\n   * success -> color-background-general-healthy-default,\n   * default -> color-background-brand-default */\n  @Prop() status: \"error\" | \"success\" | \"default\" = \"default\";\n  /** Sets the loop duration time for the indeterminate loop progress in miliseconds */\n  @Prop() duration: number = 500;\n  /** Sets the aria label in badge */\n  @Prop() setAriaLabel: string;\n  /** Sets the progress indicator color from the Volt palette \n   * backgroundProgress - ThemeColors\n   * backgroundTrack - ThemeColors */\n  @Prop() colors: { [key: string]: string } | string;\n\n  private customColors = false;\n\n  /** \n   * Returns the percentage value to set as percentage\n   * When value is lower than 0, then returns 0.\n   * When value is greater than 100, then 0.\n   * else set value.\n   * \n   * @returns { width: string }\n   */\n  setProgress(): { width: string } {\n    const percentage = this.value > 100 ? 100 : this.value < 0 ? 0 : this.value;\n    return { width: `${percentage}%` };\n  }\n\n  /** \n   * Returns the animation for the indeterminate slider\n   * Using the duration prop we return an animation effect in ms.\n   * Going from left to right using the value as the progress\n   * \n   * @returns { animation: string }\n   */\n  @Watch(\"duration\")\n  setDurationAnimation(): { animation: string } | {} {\n    if (this.duration > 0) {\n      return { animation: `fillTrack ${this.duration}ms ease-in-out infinite`};\n    }\n\n    return {};\n  }\n\n  /**\n   * Sets the styles for the progress bar.\n   *\n   * @private\n   * @returns {Object} An object containing the CSS styles for the progress bar.\n   */\n  private setProgressStyles() {\n    let style = {};\n\n    style = {...style, ...this.setProgress()} ;\n    style = {...style, ...this.setDurationAnimation()};\n    style[\"--progress-linear-starting-animation\"] = this.setProgress().width;\n\n    return style;\n  }\n\n  /**\n   * Sets custom colors for the progress bar.\n   *\n   * @private\n   * @returns {Object} An object containing the CSS styles for the custom colors.\n   */\n  private setCustomColors() {\n    const style = {};\n    const colors = typeof this.colors === \"string\" ? JSON.parse(this.colors) : this.colors;\n    this.customColors = false;\n\n    if (colors && colors[\"backgroundTrack\"]) {\n      style[\"--progress-linear-background-track\"] = `var(--${colors[\"backgroundTrack\"]})`;\n      this.customColors = true;\n    }\n\n    if (colors && colors[\"backgroundProgress\"]) {\n      style[\"--progress-linear-background-track-fill\"] = `var(--${colors[\"backgroundProgress\"]})`;\n      this.customColors = true;\n    }\n\n    return style;\n  }\n\n  render() {\n    return (\n      <Host style={this.setCustomColors()}>\n        <div class={combineClasses(\n          \"vds-progress-linear__container\",\n          this.customColors ? \"vds-progress-linear__container--custom-colors\" : \"vds-progress-linear__container--default-colors\"\n        )}>\n          <div class={combineClasses(\"vds-progress-linear__track\", `vds-progress-linear__track--${this.status}`)}></div>\n          <div\n            style={this.setProgressStyles()}\n            class={combineClasses(\n              \"vds-progress-linear__track-fill\",\n              `vds-progress-linear__track-fill--${this.status}`\n            )}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-radio-button.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-radio-button.entry.esm.js","sources":["src/components/radio-button/vds-radio-button.scss?tag=vds-radio-button&encapsulation=shadow","src/components/radio-button/vds-radio-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  input {\n    outline: none;\n    border: 0;\n    appearance: none;\n    margin: 0;\n    padding: 0;\n  }\n  label {\n    cursor: pointer;\n  }\n\n  .vds-radio-button__container {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    box-sizing: content-box;\n    border: var(--spacing-01) solid transparent;\n    appearance: none;\n\n    .radio-button-label::part(label) {\n      cursor: pointer;\n    }\n\n    .vds-radio-button {\n      display: flex;\n    }\n    \n    &:focus-within {\n      outline: none;\n      border-radius: var(--spacing-02);\n      border: var(--spacing-01) solid var(--color-border-brand);\n    }\n\n    &.vds-radio-button__container--label-alignment-start {\n      flex-direction: row-reverse;\n    }\n\n    &.vds-radio-button__container--label-alignment-end {\n      flex-direction: row;\n    }\n\n    &.vds-radio-button__container--size-medium {\n      gap: var(--spacing-03);\n      padding: calc(var(--spacing-03) - 0.125rem);\n    }\n    &.vds-radio-button__container--size-large {\n      gap: var(--spacing-04);\n      padding: calc(var(--spacing-04) - 0.125rem);\n    }\n\n    &.vds-radio-button--error {\n      .radio-button-icon::part(svg-icon) {\n        color: var(--color-icon-danger);\n        fill: var(--color-icon-danger);\n      }\n    }\n    &.vds-radio-button--disabled {\n      pointer-events: none;\n      .radio-button-icon::part(svg-icon) {\n        color: var(--color-icon-general);\n        fill: var(--color-icon-general);\n      }\n    }\n  }\n}  \n\n:host-context(.vds-radio-button--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Element, AttachInternals, EventEmitter, Event, Watch, Method } from '@stencil/core';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { RadioButtonChecked } from './vds-radio-button.utils';\n\n@Component({\n  tag: 'vds-radio-button',\n  styleUrl: 'vds-radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsRadioButton {\n\n  /** Defines the size of the radio */ \n  @Prop({ mutable: true, reflect: true }) size: \"large\" | \"medium\" = \"medium\";\n  /** Sets the radio in checked state */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Sets the radio in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Sets the radio in error state */\n  @Prop({ mutable: true, reflect: true }) error: boolean = false;\n  /** It’s useful for identifying in a radio group */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Aligns the label in relation to the radio-button*/\n  @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n  /** Sets the text to be shown in the radio-button */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Makes a custom change to target property using checked (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n  /** Emits radio button checked value */\n  @Event() radioCheck: EventEmitter<RadioButtonChecked>;\n\n  private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setRadioState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the radio-button is being click.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(_: MouseEvent): void {\n    if (!this.disabled) {\n      this.checked = true;\n      this.emitValues();\n    }\n\t}\n\n   /**\n   * Toggles radio-button value. \n   * When parameter is not provided, if true get set to false. When false get set to true.\n   * Emits check event with checked value.\n   *\n   * @param checked - Boolean (Optional)\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(checked: boolean = undefined): Promise<void> {\n    if (!this.disabled) {\n\t\t\tthis.checked = checked === undefined ? !this.checked : checked;\n      this.emitValues()\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Emits event values when radio button state changed.\n   * Emits check event with checked prop.\n   * Emits input event with value prop.\n   *\n   * @returns void\n   */\n  private emitValues(): void {\n    const inputEvent = new InputEvent(\"input\");\n    this.value = this.value ? this.value : this.checked.toString();\n    this.check.emit(this.checked);\n    this.radioCheck.emit({\n      checked: this.checked,\n      value: this.value,\n      element: this.hostEl as HTMLVdsRadioButtonElement\n    });\n    this.hostEl.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Determine state of the radio based on the checked property.\n   * When checked is true, state is checked.\n   * When checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setRadioState(): void {\n    this.state = this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderRadioButton(): HTMLStencilElement {\n    const size = getIconSize(this.size);\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class=\"radio-button-icon radio-button-icon-checked\" svgIcon={`radio-checked`} size={size}></vds-icon>;\n      default:\n        return <vds-icon class=\"radio-button-icon\" svgIcon={`radio-unchecked`} size={size}></vds-icon>;\n    }\n  }\n\n   /**\n   * Returns the vds-label for the radio-button when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label\n      class={\"radio-button-label\"}\n      labelValue={this.labelValue}\n      size={this.size}\n      disabled={this.disabled}></vds-label>\n  }\n\n  render() {\n    return (\n      <Host state={this.state} class={this.disabled ? \"vds-radio-button--disabled\" : \"\"}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds-radio-button__container\",\n            `vds-radio-button__container--size-${this.size}`,\n            `vds-radio-button__container--label-alignment-${this.labelAlignment}`,\n            this.checked ? \"vds-radio-button--checked\" : \"\",\n            this.disabled ? \"vds-radio-button--disabled\" : \"\",\n            this.error ? \"vds-radio-button--error\" : \"\"\n          )}\n        >\n          <div class=\"vds-radio-button\">\n            <input\n              type={\"radio\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderRadioButton()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-segmented-button.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-segmented-button.entry.esm.js","sources":["src/components/segmented-button/vds-segmented-button.scss?tag=vds-segmented-button&encapsulation=shadow","src/components/segmented-button/vds-segmented-button.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n\n  --vds-segmented-button-background: var(--transparent, transparent);\n  --vds-segmented-button-border: var(--radius-medium);\n  --vds-segmented-button-text-color: var(--color-link-default);\n  --vds-segmented-button-icon-color: var(--color-icon-brand-default);\n\n  --vds-segmented-button-disabled-background: var(--transparent, transparent);\n  --vds-segmented-button-disabled-border: var(--radius-medium);\n  --vds-segmented-button-disabled-text-color: var(--color-text-disabled);\n  --vds-segmented-button-disabled-icon-color: var(--color-icon-disabled);\n\n  --vds-segmented-button-active-background: var(--color-interaction-brand-lower);\n  --vds-segmented-button-active-border: var(--radius-medium);\n  --vds-segmented-button-active-text-color: var(--color-link-press);\n  --vds-segmented-button-active-icon-color: var(--color-icon-brand-press);\n\n  --vds-segmented-button-hover-background: var(--color-interaction-brand-lowest);\n  --vds-segmented-button-hover-border: var(--radius-medium);\n  --vds-segmented-button-hover-text-color: var(--color-link-hover);\n  --vds-segmented-button-hover-icon-color: var(--color-icon-brand-hover);\n\n  --vds-segmented-button-focus-background: transparent;\n  --vds-segmented-button-focus-border: var(--radius-medium);\n  --vds-segmented-button-focus-text-color: var(--color-link-default);\n  --vds-segmented-button-focus-icon-color: var(--color-icon-brand-default);\n\n  button {\n    border: none;\n    box-sizing: border-box;\n    box-shadow: none;\n    cursor: pointer;\n  }\n  .vds-segmented-button {\n    border: none;\n    box-sizing: border-box;\n    box-shadow: none;\n    width: fit-content;\n    \n    background: var(--vds-segmented-button-background);\n    height: var(--spacing-08);\n\n    display: flex;\n    padding: var(--spacing-02) var(--spacing-03);\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-02);\n\n    border-radius: var(--vds-segmented-button-border);\n\n    .vds-segmented-button__text {\n      color: var(--vds-segmented-button-text-color);\n      @include font-style(title, small);\n      text-align: center;\n      font-feature-settings: 'liga' off, 'clig' off;\n    }\n\n    .vds-segmented-button__informative-icon,\n    ::slotted(vds-icon) {\n      color: var(--vds-segmented-button-icon-color);\n      fill: var(--vds-segmented-button-icon-color);\n    }\n\n    &:hover {\n      background-color: var(--vds-segmented-button-hover-background);\n      border-radius: var(--vds-segmented-button-hover-border);\n      .vds-segmented-button__text {\n        color: var(--vds-segmented-button-hover-text-color);\n      }\n      .vds-segmented-button__informative-icon,\n      ::slotted(vds-icon) {\n        color: var(--vds-segmented-button-hover-icon-color);\n        fill: var(--vds-segmented-button-hover-icon-color);\n      }\n    }\n\n    &:focus-visible {\n      background-color: var(--vds-segmented-button-focus-background);\n      border-radius: var(--vds-segmented-button-focus-border);\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n      .vds-segmented-button__text {\n        color: var(--vds-segmented-button-focus-text-color);\n      }\n      .vds-segmented-button__informative-icon,\n      ::slotted(vds-icon) {\n        color: var(--vds-segmented-button-focus-icon-color);\n        fill: var(--vds-segmented-button-focus-icon-color);\n      }\n    }\n\n    &.vds-segmented-button--active {\n      background-color: var(--vds-segmented-button-active-background);\n      border-radius: var(--vds-segmented-button-active-border);\n      .vds-segmented-button__text {\n        color: var(--vds-segmented-button-active-text-color);\n      }\n      .vds-segmented-button__informative-icon,\n      ::slotted(vds-icon) {\n        color: var(--vds-segmented-button-active-icon-color);\n        fill: var(--vds-segmented-button-active-icon-color);\n      }\n    }\n\n    &.vds-segmented-button--disabled {\n      pointer-events: none;\n      background-color: var(--vds-segmented-button-disabled-background);\n      border-radius: var(--vds-segmented-button-disabled-border);\n      .vds-segmented-button__text {\n        color: var(--vds-segmented-button-disabled-text-color);\n      }\n      .vds-segmented-button__informative-icon,\n      ::slotted(vds-icon) {\n        color: var(--vds-segmented-button-disabled-icon-color);\n        fill: var(--vds-segmented-button-disabled-icon-color);\n      }\n    }\n  }\n}\n\n:host(.vds-segmented-button--full-width) {\n  width: 100%;\n  .vds-segmented-button {\n    width: 100%;\n  }\n}\n\n:host(.vds-segmented-button--disabled) {\n  pointer-events: none;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-segmented-button',\n  styleUrl: 'vds-segmented-button.scss',\n  shadow: true,\n})\nexport class VdsSegmentedButton {\n  /** Sets the icon at the left of the segment button */\n  @Prop() informativeIcon: string\n  /** Sets the segment button in active state */\n  @Prop({ reflect: true }) isActive: boolean = false;\n  /** When is-active is true, shows checkmark */\n  @Prop() hasCheckmark: boolean = false;\n  /** Set the segmented-button to disabled state */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Set the segmented-button value */\n  @Prop({ reflect: true }) value: string;\n  /** Allows the component to be adaptable to the container available horizontal space */\n  @Prop() fullWidth: boolean = false\n\n  /** Emits event when item gets clicked */\n  @Event() segmentedButtonClicked: EventEmitter<{ value: string, selected: boolean }>;\n  /** Emits event when item is selected */\n  @Event() selected: EventEmitter<void>;\n  /** Emits event when item is deselected */\n  @Event() deselected: EventEmitter<void>;\n\n  @Element() hostEl: HTMLElement;\n\n  @Watch(\"isActive\")\n  setActiveProp(): void {\n    if (this.isActive) {\n      this.selected.emit();\n    } else {\n      this.deselected.emit();\n    }\n  }\n\n  handleClick(evt: MouseEvent): void {\n    evt.preventDefault();\n\n    this.segmentedButtonClicked.emit({\n      value: this.value,\n      selected: this.isActive\n    })\n  }\n\n  generateInformativeIcon(): HTMLStencilElement {\n    return (\n      <vds-icon\n        class={\"vds-segmented-button__informative-icon\"}\n        svg-icon={this.isActive && this.hasCheckmark ? \"good\" : this.informativeIcon}\n        size={\"1.25rem\"}\n        alt={this.value}\n      />\n    )\n  }\n\n  render() {\n    return (\n      <Host\n        class={combineClasses(\n          this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n          this.fullWidth ? \"vds-segmented-button--full-width\" : \"\",\n        )}\n      >\n        <button\n          class={combineClasses(\n            \"vds-segmented-button\",\n            this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n            this.isActive ? \"vds-segmented-button--active\" : \"\",\n          )}\n          title={this.value}\n          disabled={this.disabled}\n          onClick={(evt): void => this.handleClick(evt)}\n        >\n          {(this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon()}\n          <span class={\"vds-segmented-button__text\"}>{<slot></slot>}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,qBAAqB,GAAG,8ymCAA8ymC;;MCS/zmC,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;AAS2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAEZ,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAI1C,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAgEnC;IApDC,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;aACf;AACL,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;;AAI1B,IAAA,WAAW,CAAC,GAAe,EAAA;QACzB,GAAG,CAAC,cAAc,EAAE;AAEpB,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC;AAChB,SAAA,CAAC;;IAGJ,uBAAuB,GAAA;AACrB,QAAA,QACE,CAAA,CAAA,UAAA,EAAA,EACE,KAAK,EAAE,wCAAwC,EACrC,UAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,IAAI,CAAC,eAAe,EAC5E,IAAI,EAAE,SAAS,EACf,GAAG,EAAE,IAAI,CAAC,KAAK,EAAA,CACf;;IAIN,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,cAAc,CACnB,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EACrD,IAAI,CAAC,SAAS,GAAG,kCAAkC,GAAG,EAAE,CACzD,EAAA,EAED,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACnB,sBAAsB,EACtB,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EACrD,IAAI,CAAC,QAAQ,GAAG,8BAA8B,GAAG,EAAE,CACpD,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,GAAG,KAAW,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAA,EAE5C,CAAC,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC,uBAAuB,EAAE,EACjG,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,4BAA4B,EAAA,EAAG,8DAAa,CAAQ,CAC1D,CACJ;;;;;;;;;;;"}

package/dist/volt-basic-components/vds-sheet.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sheet.entry.esm.js","sources":["src/components/sheet/vds-sheet.scss?tag=vds-sheet&encapsulation=shadow","src/components/sheet/vds-sheet.tsx"],"sourcesContent":[":host {\n  --vds-sheet-background-color: var(--surface-medium);\n  --vds-sheet-backdrop-color: var(--color-interaction-black-lower);\n  --vds-sheet-box-shadow: var(--elevation-shadow-1);\n  --vds-sheet-border-radius: 28px;\n  --vds-sheet-drag-handle-color: var(--color-icon-high);\n  --vds-sheet-transition-duration: 0.3s;\n\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: var(--elevation-layer-5);\n  width: 100%;\n  height: fit-content;\n\n  .vds-sheet__backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 100vw;\n    height: 100vh;\n    background-color: var(--vds-sheet-backdrop-color);\n    opacity: 0;\n    transition: opacity var(--vds-sheet-transition-duration) ease-out;\n    pointer-events: none;\n\n    &.vds-sheet__backdrop--visible {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n\n  .vds-sheet__container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-05);\n    box-sizing: border-box;\n    width: 100%;\n    max-height: 80vh;\n    padding: 0 var(--spacing-05) var(--spacing-05);\n    background-color: var(--vds-sheet-background-color);\n    border-radius: var(--vds-sheet-border-radius) var(--vds-sheet-border-radius) 0 0;\n    box-shadow: var(--vds-sheet-box-shadow);\n    transform: translateY(100%);\n    transition: transform var(--vds-sheet-transition-duration) ease-out;\n\n    &.vds-sheet__container--opened {\n      transform: translateY(0);\n    }\n  }\n\n  .vds-sheet__drag-handle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: var(--spacing-05);\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n\n    .vds-sheet__drag-handle-bar {\n      width: 2rem;\n      height: 0.25rem;\n      background-color: var(--vds-sheet-drag-handle-color);\n      border-radius: var(--radius-medium);\n    }\n  }\n}\n\n:host(.vds-sheet--closed) {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n:host(.vds-sheet--opened) {\n  visibility: visible;\n  pointer-events: auto;\n}\n","import { Component, Host, h, Prop, Method, EventEmitter, Event, Watch, Listen, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-sheet',\n  styleUrl: 'vds-sheet.scss',\n  shadow: true,\n})\nexport class VdsSheet {\n  /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */\n  @Prop() backdrop: boolean = false;\n  /** Open / Close the bottom sheet. */\n  @Prop({ mutable: true }) opened: boolean = false;\n  /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */\n  @Prop() height: string = 'auto';\n  /** Allow drag handle interaction to close the bottom sheet. */\n  @Prop() hideDragHandle: boolean = false;\n\n  /** Emits event when bottom-sheet is opened */\n  @Event() bottomsheetOpened: EventEmitter<void>;\n  /** Emits event when bottom-sheet is closed */\n  @Event() bottomsheetClosed: EventEmitter<void>;\n\n  @Element() el: HTMLElement;\n\n  private dragStartY: number = 0;\n  private isDragging: boolean = false;\n  private dragThreshold: number = 50; // px threshold to close bottom sheet\n\n  @Watch('opened')\n  emitValue(): void {\n    if (this.opened) {\n      this.bottomsheetOpened.emit();\n    } else {\n      this.bottomsheetClosed.emit();\n    }\n  }\n\n  /** Listen for Escape key to close the bottom sheet */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.opened) {\n      this.close();\n    }\n  }\n\n  /**\n   * Trigger open the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is opened\n   */\n  @Method()\n  async open(): Promise<void> {\n    this.opened = true;\n  }\n\n  /**\n   * Trigger closes the bottomsheet\n   * @returns Promise that resolves when the bottomsheet is closed\n   */\n  @Method()\n  async close(): Promise<void> {\n    this.opened = false;\n  }\n\n  /**\n   * Handle drag interactions to close the bottom sheet.\n   */\n  private handleDragStart = (event: TouchEvent | MouseEvent): void => {\n    if (this.hideDragHandle) return;\n\n    this.isDragging = true;\n    this.dragStartY = this.getClientY(event);\n\n    if ('touches' in event) {\n      document.addEventListener('touchmove', this.handleDragMove, { passive: false });\n      document.addEventListener('touchend', this.handleDragEnd);\n    } else {\n      document.addEventListener('mousemove', this.handleDragMove);\n      document.addEventListener('mouseup', this.handleDragEnd);\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragMove = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n\n    // Only allow dragging downward (positive deltaY)\n    if (deltaY > 0) {\n      const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n      if (container) {\n        container.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n  };\n\n  private handleDragEnd = (event: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging || this.hideDragHandle) return;\n\n    const currentY = this.getClientY(event);\n    const deltaY = currentY - this.dragStartY;\n    const container = this.el.shadowRoot?.querySelector('.vds-sheet__container') as HTMLElement;\n\n    if (container) {\n      container.style.transform = '';\n\n      if (deltaY > this.dragThreshold) {\n        this.close();\n      }\n    }\n\n    document.removeEventListener('touchmove', this.handleDragMove);\n    document.removeEventListener('touchend', this.handleDragEnd);\n    document.removeEventListener('mousemove', this.handleDragMove);\n    document.removeEventListener('mouseup', this.handleDragEnd);\n\n    this.isDragging = false;\n    this.dragStartY = 0;\n  };\n\n  private getClientY(event: TouchEvent | MouseEvent): number {\n    if ('touches' in event) {\n      const touch = event.touches[0] || event.changedTouches[0];\n      return touch.clientY;\n    }\n    return event.clientY;\n  }\n\n  /**\n   * Get the style for the container based on the height prop\n   * If the height is a percentage, it converts it to viewport height.\n   */\n  private getContainerStyle(): { [key: string]: string } {\n    if (this.height === 'auto') {\n      return {};\n    }\n    if (this.height.includes('%')) {\n      const percentValue = parseFloat(this.height);\n      return { height: `${percentValue}vh` };\n    }\n\n    return { height: this.height };\n  }\n\n  private renderBackdrop(): HTMLStencilElement {\n    return <div class={combineClasses('vds-sheet__backdrop', this.opened ? 'vds-sheet__backdrop--visible' : '')} onClick={() => this.close()}></div>;\n  }\n\n  private renderDragHandle(): HTMLStencilElement {\n    if (this.hideDragHandle) return null;\n\n    return (\n      <div class=\"vds-sheet__drag-handle\" onTouchStart={this.handleDragStart} onMouseDown={this.handleDragStart}>\n        <div class=\"vds-sheet__drag-handle-bar\"></div>\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host role=\"dialog\" aria-hidden={!this.opened ? 'true' : 'false'} aria-modal={this.opened ? 'true' : 'false'} class={this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed'}>\n        {this.backdrop && this.renderBackdrop()}\n        <div class={combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : '')} style={this.getContainerStyle()}>\n          {this.renderDragHandle()}\n          <div class=\"vds-sheet__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-sidenav-item-app.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sidenav-item-app.entry.esm.js","sources":["src/components/sidenav-item-app/vds-sidenav-item-app.scss?tag=vds-sidenav-item-app&encapsulation=shadow","src/components/sidenav-item-app/vds-sidenav-item-app.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n\n:host {\n  display: block;\n  --vds-sidenav-item-app-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-app-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n\n  .vds__sidenav__item__app--container {\n    display: flex;\n    padding: var(--spacing-03);\n    align-items: center;\n    justify-content: center;\n    gap: var(--spacing-04);\n    flex: 1 0 0;\n    background-color: transparent;\n    border-radius: var(--radius-medium);\n    border: none;\n    outline: none;\n    width: 100%;\n    height: 3.5rem;\n\n    &.collapsed {\n      width: var(--vds-sidenav-item-app-collapsed-width);\n    }\n\n    &.expanded {\n      justify-content: start;\n      width: var(--vds-sidenav-item-app-expanded-width);\n    }\n\n    &:hover {\n      border-radius: var(--radius-medium);\n      background: var(--color-interaction-black-lowest);\n    }\n\n    &:focus-visible {\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n\n    &:active {\n      border-radius: var(--radius-medium);\n      background: var(--color-interaction-brand-lowest);\n      span.vds__sidenav__item__app--expanded-value {\n        color: var(--color-link-press);\n      }\n    }\n\n    &.active, .active:hover {\n      border-radius: var(--radius-medium);\n      background: var(--color-interaction-brand-lowest);\n      span.vds__sidenav__item__app--expanded-value {\n        color: var(--color-link-press);\n      }\n    }\n\n    span.vds__sidenav__item__app--expanded-value {\n      color: var(--color-text-medium);\n      font-feature-settings: 'clig' off, 'liga' off;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      @include font-style(title, large);\n    }\n\n    .vds__sidenav__item__app--expanded {\n      display: flex;\n      align-items: center;\n      gap: var(--spacing-04);\n      width: 100%;\n      height: 100%;\n      justify-content: space-between;\n\n      .vds__sidenav__item__app--icon-button {\n        background: none;\n        color: inherit;\n        border: none;\n        padding: 0;\n        font: inherit;\n        cursor: pointer;\n        outline: inherit;\n      }\n    }\n\n    .vds__sidenav__item__app--image {\n      max-height: var(--spacing-11);\n      max-width: var(--spacing-11);\n    }\n  }\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-sidenav-item-app',\n  styleUrl: 'vds-sidenav-item-app.scss',\n  shadow: true,\n})\nexport class VdsSidenavItemApp {\n  /** Define text value */\n  @Prop() value: string;\n  /** Shows arrow when there are children */\n  @Prop() menuIcon: boolean;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop() expanded: boolean = true;\n  /** Puts the navItem in active state */\n  @Prop() isActive: boolean;\n\n  /** Emits event when item gets clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n  /** Emits event when the user clicks on menu icon*/\n  @Event() viewMoreClick: EventEmitter<MouseEvent>;\n\n\n  private getExpandedSidenavItemApp(): HTMLStencilElement {\n    return (\n      <div class={\"vds__sidenav__item__app--expanded\"}>\n        <span class={\"vds__sidenav__item__app--expanded-value\"}>{this.value}</span>\n        {this.menuIcon && \n          <button class={\"vds__sidenav__item__app--icon-button\"} onClick={(evt) => {this.viewMoreClick.emit(evt)}}>\n            <vds-icon\n              color=\"color-icon-medium\"\n              svgIcon=\"more-vertical\"\n              size=\"1.5rem\">\n            </vds-icon>\n          </button>}\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <button \n          class={combineClasses(\n            \"vds__sidenav__item__app--container\",\n            `${this.isActive ? \"active\" : \"\"}`,\n            `${this.expanded ? \"expanded\" : \"collapsed\"}`\n          )}\n          onClick={(evt) => {this.clicked.emit(evt)}}\n        >\n          <div class={\"vds__sidenav__item__app--image\"}>\n            <slot name=\"img\"></slot>\n          </div>\n          {this.expanded && this.getExpandedSidenavItemApp()}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,oBAAoB,GAAG,kliCAAkliC;;MCSlmiC,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAWU,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AA6CjC;IAnCS,yBAAyB,GAAA;AAC/B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,mCAAmC,EAAA,EAC7C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,yCAAyC,IAAG,IAAI,CAAC,KAAK,CAAQ,EAC1E,IAAI,CAAC,QAAQ;YACZ,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,sCAAsC,EAAE,OAAO,EAAE,CAAC,GAAG,OAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAC,EAAA,EACrG,CAAA,CAAA,UAAA,EAAA,EACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAC,eAAe,EACvB,IAAI,EAAC,QAAQ,EAAA,CACJ,CACJ,CACP;;IAIV,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACnB,oCAAoC,EACpC,CAAG,EAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAClC,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAE,CAAA,CAC9C,EACD,OAAO,EAAE,CAAC,GAAG,KAAM,EAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAC,EAAA,EAE1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gCAAgC,EAAA,EAC1C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAC3C,CACJ;;;;;;;"}

package/dist/volt-basic-components/vds-sidenav-item-button.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sidenav-item-button.entry.esm.js","sources":["src/components/sidenav-item-button/vds-sidenav-item-button.scss?tag=vds-sidenav-item-button&encapsulation=shadow","src/components/sidenav-item-button/vds-sidenav-item-button.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n\n:host {\n  display: block;\n  --vds-sidenav-item-button-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-button-static-width: var(--vds-sidenav-static-width, 3.75rem);\n  --vds-sidenav-item-button-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n  .vds__sidenav-item-button {\n    box-sizing: border-box;\n    padding: var(--spacing-00) var(--spacing-03);\n    justify-content: flex-start;\n    align-items: center;\n    border-radius: var(--radius-medium);\n    display: flex;\n    overflow: hidden;\n    font-feature-settings: 'clig' off, 'liga' off;\n    text-overflow: ellipsis;\n    line-height: 1.25rem;\n    border: var(--spacing-00) solid transparent;\n    cursor: pointer;          \n    &:focus-visible {\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n  }\n  .vds__sidenav-item-button--variant-primary{\n    background-color: var(--color-background-brand-default);\n    color: var(--static-white);\n    &:active, &:active:hover {\n      background-color: var(--color-background-brand-press);\n      outline: none;\n    }\n    &:hover {\n      background-color: var(--color-background-brand-hover);\n      outline: 0.25rem solid var(--color-border-brand-hover);\n      outline-offset: 0;\n    }\n    &.vds__sidenav-item-button--static-disabled{\n      box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n    }\n  }\n  .vds__sidenav-item-button--variant-secondary{    \n    color: var(--color-link-default);\n    background-color: transparent;\n    box-shadow: 0 0 0 0.125rem inset var(--color-border-brand);\n    &:active, &:active:hover {\n      background-color: var(--color-interaction-brand-lower);\n      color: var(--color-link-press);\n      vds-icon {\n        color: var(--color-icon-brand-press);\n        fill: var(--color-icon-brand-press);\n      }\n    }\n    &:hover {\n      background-color: var(--color-interaction-brand-lowest);\n      color: var(--color-link-hover);\n      vds-icon {\n        color: var(--color-icon-brand-hover);\n        fill: var(--color-icon-brand-hover);\n      }\n    }\n    \n    &.vds__sidenav-item-button--static{\n      box-shadow: 0 0 0 0.125rem inset var(--color-border-brand);\n      &.vds__sidenav-item-button--static-disabled{\n        box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);\n      }\n    }       \n  }\n  .vds__sidenav-item-button--informative-icon{\n    display: flex;\n    padding: var(--spacing-03, 0.5rem);\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-00, 0px);\n  }\n  .vds__sidenav-item-button--static {\n    padding: 0;\n    letter-spacing: 0.009rem;\n    text-align: center;\n    width: var(--vds-sidenav-item-button-static-width);\n    min-height: 3.25rem;\n    display: flex;     \n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    @include font-style(title, 2x-small);\n    box-sizing: border-box;\n    .vds__sidenav-item-button--informative-icon{\n      padding: var(--spacing-03, 0.5rem) var(--spacing-03, 0.5rem) 0 var(--spacing-03, 0.5rem);\n    }\n  }\n  .vds__sidenav-item-button--static-label {\n    width: auto;\n    height: auto;\n    max-height: 1.5rem;\n    max-width: var(--vds-sidenav-item-button-static-width);\n    text-overflow: ellipsis;\n    overflow: hidden;\n    padding: var(--spacing-02) var(--spacing-00);\n  }\n  .vds__sidenav-item-button--expanded {\n    width: var(--vds-sidenav-item-button-expanded-width);\n    height: 2.5rem;\n    border-radius: var(--spacing-02);\n  }  \n  .vds__sidenav-item-button--expanded-label {\n    @include font-style(title, medium);\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    padding: var(--spacing-03, 0.5rem);\n    text-overflow: ellipsis;\n    overflow: hidden;\n    line-height: 1.25rem;\n    white-space: nowrap;\n    margin-right: auto;\n  }\n  .vds__sidenav-item-button--collapsed {\n    width: var(--vds-sidenav-item-button-collapsed-width);\n    height: 2.5rem;\n    justify-content: center;\n  }\n  .vds__sidenav-item-button--label-disabled{\n    color: var(--color-text-disabled);\n    cursor: none;\n  }\n  .vds__sidenav-item-button--label-active {\n    color: var(--color-link-press);\n  }\n  .vds__sidenav-item-button--active {\n    background-color: var(--color-interaction-brand-lowest); \n    color: var(--color-link-press) ; \n  }\n  .vds__sidenav-item-button--expandable-disabled { \n    pointer-events: none;\n    background: var(--global-transparent);\n    color: var(--color-text-disabled);\n  }\n  .vds__sidenav-item-button--expandable-primary-disabled {\n    box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);\n  }\n  .vds__sidenav-item-button--expandable-secondary-disabled {\n    box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);\n  }  \n  .vds__sidenav-item-button--static-disabled { \n    box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);\n    pointer-events: none;\n    background: var(--global-transparent);\n    color: var(--color-text-disabled);\n  } \n}\n\n:host-context(.vds__sidenav-item-button--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-sidenav-item-button',\n  styleUrl: 'vds-sidenav-item-button.scss',\n  shadow: true,\n})\nexport class VdsSidenavItemButton {\n  /** Puts the navItem in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  /** Define the icon value */\n  @Prop({ mutable: true }) icon: string;\n  /** Toggles static mode in nav-item */\n  @Prop({ mutable: true }) isStatic: boolean = false;\n  /** Define text value */\n  @Prop({ mutable: true }) value: string;\n  /** Define aria label value */\n  @Prop({ mutable: true }) setAriaLabel: string;\n  /** Define variant */\n  @Prop() variant: \"primary\" | \"secondary\" = \"primary\";\n\n  /** Emits event when item gets clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n\n  private handleClick(evt: MouseEvent): void {\n    this.clicked.emit(evt);\n  }\n  private generateInformativeIcon(){\n    const iconColor = this.disabled ? 'color-icon-disabled' : this.variant=='primary'? 'white': 'color-icon-brand-default';\n    return (\n      <span class=\"vds__sidenav-item-button--informative-icon\">\n        <vds-icon\n          svg-icon={this.icon}\n          size={'1.5rem'}\n          color={iconColor}\n          alt={this.value}\n        />\n      </span>\n    );\n  }\n  private generateLabel(){\n    return (          \n            <span\n              class={`\n                    ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static-label' : 'vds__sidenav-item-button--expanded-label'}\n                    ${this.disabled ? 'vds__sidenav-item-button--label-disabled' : ''}\n                    `}\n            >\n              {this.value ? this.value : <slot></slot>}\n            </span>    \n    );\n  }\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__sidenav-item-button--disabled' : ''}>\n        <button\n          aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n          disabled={this.disabled}\n          onClick={(evt: MouseEvent) => {\n            if (this.disabled) {\n              evt.stopPropagation();\n              evt.preventDefault();\n            } else {\n              this.handleClick(evt);\n            }\n          }}\n          class={`vds__sidenav-item-button\n                 vds__sidenav-item-button--variant-${this.variant} \n                 ${this.isStatic && !this.expanded ? 'vds__sidenav-item-button--static' : this.expanded ? 'vds__sidenav-item-button--expanded' : 'vds__sidenav-item-button--collapsed'}\n                 ${this.disabled && this.isStatic ? 'vds__sidenav-item-button--static-disabled' : ''}\n                 ${this.disabled && !this.isStatic ? 'vds__sidenav-item-button--expandable-disabled' : ''}\n                 ${this.disabled && this.variant==='primary' ? 'vds__sidenav-item-button--expandable-primary-disabled':'' }\n                 ${this.disabled && this.variant==='secondary' && !this.isStatic ? 'vds__sidenav-item-button--expandable-secondary-disabled':'' }\n                 `}\n        >\n          {this.generateInformativeIcon()}         \n          {this.expanded || this.isStatic ? this.generateLabel() : null }\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/volt-basic-components/vds-sidenav-item-category.entry.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-sidenav-item-category.entry.esm.js","sources":["src/components/sidenav-item-category/vds-sidenav-item-category.scss?tag=vds-sidenav-item-category&encapsulation=shadow","src/components/sidenav-item-category/vds-sidenav-item-category.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n@import '../base-group-header/base-group-header.scss';\n\n:host {\n  display: block;\n  width: fit-content;\n  --vds-sidenav-item-category-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-category-static-width: var(--vds-sidenav-static-width, 3.75rem);\n  --vds-sidenav-item-category-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n\n  .vds-sidenav-item-category {\n    padding: var(--spacing-00);\n\n    &__header {\n      display: inline-flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-direction: row;\n      width: var(--vds-sidenav-item-category-expanded-width);\n      gap: var(--spacing-03);\n      padding-bottom: var(--spacing-03);\n    }\n\n    &__content {\n      display: flex;\n      flex-direction: column;\n\n      ::slotted(*) {\n        display: flex;\n        flex-direction: column;\n        row-gap: var(--spacing-03);\n      }\n    }\n\n    &__action-slot {\n      align-items: center;\n      color: var(--color-text-medium);\n      font-feature-settings: 'clig' off, 'liga' off;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &--medium {\n        padding-right: var(--spacing-03);\n        @include font-style(title, extra-small);\n      }\n\n      &--large {\n        padding-right: var(--spacing-04);\n        @include font-style(title, small);\n      }\n    }\n\n    &__divider-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 2rem;\n\n      &--collapsed {\n        width: var(--vds-sidenav-item-category-collapsed-width);\n      }\n\n      &--static {\n        width: var(--vds-sidenav-item-category-static-width);\n      }\n    }\n\n    &__divider {\n      height: 0.0625rem;\n      opacity: 0.08;\n      background-color: var(--color-border-high);\n      display: block;\n\n      &--collapsed {\n        width: 2.5rem;\n      }\n\n      &--static {\n        width: 2.75rem;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n  tag: 'vds-sidenav-item-category',\n  styleUrl: 'vds-sidenav-item-category.scss',\n  shadow: true,\n})\nexport class VdsSidenavItemCategory {\n  @Element() hostEl: HTMLElement;\n  /**\n   * Define text value. This component has the possibility of adding an element to the right of this value\n   * using the slot called \"action-slot\". The display condition is when a value is defined in the value property,\n   * the expanded property is equal to true, and the isStatic property is equal to false.\n   */\n  @Prop({ mutable: true }) value: string;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  /** Toggles static mode in nav-item */\n  @Prop({ mutable: true }) isStatic: boolean = false;\n  /** Size of the group header when expanded */\n  @Prop() size: GroupHeaderSize = 'medium';\n\n  private getCollapsedView() {\n    return (\n      <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--collapsed\">\n        <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--collapsed\"></span>\n      </div>\n    );\n  }\n\n  private getStaticView() {\n    return (\n      <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--static\">\n        <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--static\"></span>\n      </div>\n    );\n  }\n\n  private getExpandedView() {\n    return generateGroupHeaderContainer(this.size, this.value);\n  }\n\n  private setView() {\n    return this.expanded\n      ? this.getExpandedView()\n      : this.isStatic\n      ? this.getStaticView()\n      : this.getCollapsedView();\n  }\n\n  private setSlot() {\n    if (this.value && this.expanded && !this.isStatic) {\n      return (\n        <div class={`vds-sidenav-item-category__action-slot vds-sidenav-item-category__action-slot--${this.size}`}>\n          <slot name=\"action-slot\"></slot>\n        </div>\n      );\n    }\n  }\n\n  componentDidRender() {\n    try {\n      const sidenavItems = Array.from(this.hostEl.querySelectorAll('vds-sidenav-item, vds-sidenav-item-app')) as any;\n      sidenavItems.forEach((sidenavItem, sidenavItemIndex) => {\n        sidenavItem.setAttribute('vds-sidenavItem-Index', `${sidenavItemIndex}`);\n        sidenavItem.expanded = this.expanded;\n        sidenavItem.isStatic = this.isStatic;\n      });\n    } catch (error) {\n      console.warn('Error updating sidenav items: ', error);\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class=\"vds-sidenav-item-category\">\n          <div class=\"vds-sidenav-item-category__header\">\n            {this.setView()}\n            {this.setSlot()}\n          </div>\n          <div class=\"vds-sidenav-item-category__content\">\n            <slot name=\"category-items\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,yBAAyB,GAAG,+9iCAA+9iC;;MCSp/iC,sBAAsB,GAAA,MAAA;AALnC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAc2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAE1C,QAAA,IAAI,CAAA,IAAA,GAAoB,QAAQ;AAoEzC;IAlES,gBAAgB,GAAA;QACtB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sGAAsG,EAAA,EAC/G,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,kFAAkF,EAAQ,CAAA,CAClG;;IAIF,aAAa,GAAA;QACnB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mGAAmG,EAAA,EAC5G,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,+EAA+E,EAAQ,CAAA,CAC/F;;IAIF,eAAe,GAAA;QACrB,OAAO,4BAA4B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;;IAGpD,OAAO,GAAA;QACb,OAAO,IAAI,CAAC;AACV,cAAE,IAAI,CAAC,eAAe;cACpB,IAAI,CAAC;AACP,kBAAE,IAAI,CAAC,aAAa;AACpB,kBAAE,IAAI,CAAC,gBAAgB,EAAE;;IAGrB,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACjD,QACE,WAAK,KAAK,EAAE,CAAA,+EAAA,EAAkF,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EACvG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,aAAa,EAAQ,CAAA,CAC5B;;;IAKZ,kBAAkB,GAAA;AAChB,QAAA,IAAI;AACF,YAAA,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,wCAAwC,CAAC,CAAQ;YAC9G,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,gBAAgB,KAAI;gBACrD,WAAW,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAG,EAAA,gBAAgB,CAAE,CAAA,CAAC;AACxE,gBAAA,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AACpC,gBAAA,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AACtC,aAAC,CAAC;;QACF,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,IAAI,CAAC,gCAAgC,EAAE,KAAK,CAAC;;;IAIzD,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,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,mCAAmC,EAAA,EAC3C,IAAI,CAAC,OAAO,EAAE,EACd,IAAI,CAAC,OAAO,EAAE,CACX,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAQ,CAC/B,CACF,CACD;;;;;;;;"}