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

package/dist/components/vds-sidenav-item2.js.map

@@ -1 +0,0 @@
-{"file":"vds-sidenav-item2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sidenav-item/vds-sidenav-item.scss?tag=vds-sidenav-item&encapsulation=shadow","src/components/sidenav-item/vds-sidenav-item.tsx"],"sourcesContent":["@import \"~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations\";\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  box-shadow: none;\n\n  --vds-sidenav-item-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-static-width: var(--vds-sidenav-static-width, 3.75rem);\n  --vds-sidenav-item-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n\n  .vds__sidenav-item {\n      box-sizing: border-box;\n      padding: var(--spacing-00) var(--spacing-03);\n      justify-content: space-between;\n      align-items: center;\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-radius: var(--spacing-02);\n      border: none;\n      text-decoration: none;\n      cursor: pointer;\n      @include font-style(body, medium);\n      &:hover {\n        background-color: var(--color-interaction-black-lowest);\n      }\n      &:focus-visible {\n        outline: 0.125rem solid var(--color-border-focus-2);\n        outline-offset: 0.125rem;\n      }\n  }\n  .vds__sidenav-item--expanded-informative-icon{\n    display: flex;\n    padding: var(--spacing-00) var(--spacing-03);\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-00, 0px);\n    color: var(--color-icon-medium);\n  }\n\n  .vds__sidenav-item--collapsed-informative-icon{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: var(--color-icon-medium);\n  }  \n  .vds__sidenav-item--static-informative-icon{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-00);\n    color: var(--color-icon-medium);\n    padding: var(--spacing-03) var(--spacing-03) var(--spacing-00) var(--spacing-03);\n  }\n  .vds__sidenav-item--interaction-icon {\n    display: flex;\n    padding: var(--spacing-00);\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-00);\n    color: var(--color-icon-medium);\n    background: transparent; \n  }\n  .vds__sidenav-item--interaction-right-slot {\n    display: flex;\n    padding: var(--spacing-00);\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-00, 0px);\n    color: var(--color-text-medium);\n    background: transparent; \n  }\n  .vds__sidenav-item--static {\n    padding: 0;\n    color: var(--color-text-medium);\n    text-align: center;\n    width: var(--vds-sidenav-item-static-width);\n    display: flex;     \n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    background-color: transparent;\n    min-height: 3rem;\n    max-height: 3.75rem;\n    @include font-style(title, 2x-small);\n    letter-spacing: 0.009rem;\n  }\n  .vds__sidenav-item--static-label {\n    width: auto;\n    height: auto;\n    max-height: 24px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    padding: var(--spacing-02) var(--spacing-00);\n  }\n  .vds__sidenav-item--expanded {\n    width: var(--vds-sidenav-item-expanded-width);\n    height: 2.25rem;\n    background-color: transparent;\n    color: var(--color-text-medium);\n    border-radius: var(--spacing-02);\n    padding: var(--spacing-03) var(--spacing-03);\n    column-gap: var(--spacing-02);\n  }  \n  .vds__sidenav-item--expanded-label {\n    width: auto;\n    height: auto;\n    color: var(--color-text-medium);\n    padding: var(--spacing-00);\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--collapsed {\n    color: var(--color-text-medium);\n    padding: var(--spacing-03) var(--spacing-03);\n    width: var(--vds-sidenav-item-collapsed-width);\n    height: 2.25rem;\n    justify-content: center;\n    background-color: transparent;\n  }\n  .vds__sidenav-item--label-disabled{\n    color: var(--color-text-disabled);\n    cursor: none;\n  }\n  .vds__sidenav-item--label-active {\n    color: var(--color-link-press);\n    @include font-style(title, small);\n  }\n  .vds__sidenav-item--static-label-active {\n    color: var(--color-link-press);\n  }\n  .vds__sidenav-item--active {\n    background-color: var(--color-interaction-brand-lowest); \n    color: var(--color-link-press) ; \n  }\n  .vds__sidenav-item--disabled {\n    pointer-events: none;\n    background: var(--global-transparent);\n    color: var(--text-disabled);\n    &:focus-visible {\n      outline: none;\n    }\n  }  \n}\n\n:host-context(.vds__sidenav-item--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',\n  styleUrl: 'vds-sidenav-item.scss',\n  shadow: true,\n})\nexport class VdsSidenavItem {\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  /** Define item as active when is true */\n  @Prop({ mutable: true }) isActive: boolean = false;\n  /** Toggles static mode in nav-item */\n  @Prop({ mutable: true }) isStatic: boolean = false;\n  /** Shows arrow when there are children */\n  @Prop({ mutable: true }) hasChildren: boolean = false;\n  /** Defines the element as a link */\n  @Prop({ mutable: true }) link_href: string = null;\n  /** Sets the target value */\n  @Prop({ mutable: true }) link_target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n  /** Sets the link rel value */\n  @Prop({ mutable: true }) link_rel: string = null;\n  /** Define text value */\n  @Prop({ mutable: true }) value: string;\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\n  private generateRightSlot(){\n    return (\n      this.expanded && !this.isStatic ? \n        <span class=\"vds__sidenav-item--interaction-right-slot\">\n          <slot name=\"rightSlot\" />\n        </span> \n      : null\n    )\n  }\n\n  private generateChildrenIcon(){\n    \n  if (this.hasChildren && (this.isStatic || this.expanded)) {\n    return (\n            <span class=\"vds__sidenav-item--interaction-icon\">\n              <vds-icon\n                svg-icon=\"chevron-right\"\n                size={'1.25rem'}\n                color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium'}\n                alt=\"Open menu\"\n              />\n            </span>\n          ) \n    }        \n  }\n  private generateInformativeIcon(){\n    if (this.icon){\n       return (\n          <span \n          class={`${this.isStatic ? \"vds__sidenav-item--static-informative-icon\" : \n            this.expanded ? \"vds__sidenav-item--expanded-informative-icon\" :\n            \"vds__sidenav-item--collapsed-informative-icon\"\n                }`}\n          >\n            <vds-icon\n              svg-icon={this.icon}\n              size={'1.25rem'}\n              color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium'}\n              alt={this.value}\n            />\n          </span>\n       )\n    }\n  }\n  render(): HTMLStencilElement {\n    const Element = this.link_href ? \"a\" : \"button\";\n    const href = this.link_href ? this.link_href : null;\n    const target = this.link_href ? this.link_target : null;\n    const rel = this.link_href ? this.link_rel : null;\n    return (\n      <Host class={this.disabled ? 'vds__sidenav-item--disabled' : ''}>\n        <Element\n          onClick={(evt: MouseEvent) => {\n            if (this.disabled) {\n              evt.stopPropagation();\n              evt.preventDefault();\n            } else {\n              this.handleClick(evt);\n            }\n          }}\n          href={ href }\n          target={ target }\n          rel={ rel }\n          class={`vds__sidenav-item \n                     ${this.isStatic ? 'vds__sidenav-item--static' : this.expanded ? 'vds__sidenav-item--expanded' : 'vds__sidenav-item--collapsed'}\n                     ${this.disabled ? 'vds__sidenav-item--disabled' : ''}\n                     ${this.isActive && !this.disabled ? 'vds__sidenav-item--active' : ''}\n                `}\n        >\n          {this.generateInformativeIcon()}  \n          {this.expanded || this.isStatic ? (\n            <span\n              class={`\n                    ${this.isStatic ? 'vds__sidenav-item--static-label' : 'vds__sidenav-item--expanded-label'}\n                    ${this.disabled ? 'vds__sidenav-item--label-disabled' : ''}\n                    ${this.isActive && !this.disabled && this.expanded ? 'vds__sidenav-item--label-active' : ''}\n                    ${this.isActive && !this.disabled && this.isStatic ? 'vds__sidenav-item--static-label-active' : ''}\n                    `}\n            >\n              {this.value}\n            </span>\n          ) : null}\n          {this.generateRightSlot()}\n          {this.generateChildrenIcon()}\n        </Element>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-skeleton-loading.js.map

@@ -1 +0,0 @@
-{"file":"vds-skeleton-loading.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,k+gCAAk+gC,CAAC;;MCS3/gCA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAA,WAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA+B,aAAa;;AAEnD,QAAA,IAAA,CAAA,KAAK,GAAW,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM;;AAEhE,QAAA,IAAA,CAAA,MAAM,GAAW,IAAI,CAAC,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS;AA8B7E;IA5BS,SAAS,GAAA;QACf,MAAM,KAAK,GAAQ,EAAE;AAErB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;AAG1B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM;;AAG5B,QAAA,OAAO,KAAK;;IAGd,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,aAAa,eAAW,MAAM,EAAA,EACvC,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACnB,cAAc,EACd,CAA0B,uBAAA,EAAA,IAAI,CAAC,OAAO,CAAE,CAAA,CACzC,EACD,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,iBACX,MAAM,EAAA,CACZ,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsSkeletonLoading","__stencil_proxyCustomElement"],"sources":["src/components/skeleton-loading/vds-skeleton-loading.scss?tag=vds-skeleton-loading&encapsulation=shadow","src/components/skeleton-loading/vds-skeleton-loading.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --vds-skeleton-background-color: var(--surface-lower);\n  --vds-skeleton-animation-color: var(--surface-high);\n  --vds-skeleton-variant-rectangular-border-radius: var(--radius-medium);\n  --vds-skeleton-variant-circular-border-radius: 50%;\n  --vds-skeleton-gradient-angle: 270deg;\n  --vds-skeleton-animation-duration: 1.5s;\n\n  .vds-skeleton {\n    display: block;\n    background: var(--vds-skeleton-background-color);\n    width: inherit;\n    height: inherit;\n    position: relative;\n    overflow: hidden;\n\n    &.vds-skeleton__variant--rectangular {\n      border-radius: var(--vds-skeleton-variant-rectangular-border-radius);\n    }\n    \n    &.vds-skeleton__variant--circular {\n      border-radius: var(--vds-skeleton-variant-circular-border-radius);\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background: linear-gradient(\n        var(--vds-skeleton-gradient-angle),\n        rgb(from var(--vds-skeleton-animation-color) r g b / 0),\n        rgb(from var(--vds-skeleton-animation-color) r g b / 0.3),\n        rgb(from var(--vds-skeleton-animation-color) r g b / 0.5),\n        rgb(from var(--vds-skeleton-animation-color) r g b / 0.8),\n        rgb(from var(--vds-skeleton-animation-color) r g b / 0)\n      );\n      transform: translateX(-100%);\n      animation: skeleton-loading var(--vds-skeleton-animation-duration) infinite linear;\n    }\n  }\n}\n\n\n@keyframes skeleton-loading {\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-skeleton-loading',\n  styleUrl: 'vds-skeleton-loading.scss',\n  shadow: true,\n})\nexport class VdsSkeletonLoading {\n  /** Define the skeleton shape variant */\n  @Prop() variant: \"rectangular\" | \"circular\" = \"rectangular\";\n  /** Define the skeleton width value */\n  @Prop() width: string = this.variant === \"circular\" ? \"1.75rem\" : \"100%\";\n  /** Define the skeleton height value */\n  @Prop() height: string = this.variant === \"circular\" ? \"1.75rem\" : \"2.25rem\";\n\n  private getStyles() {\n    const style: any = {};\n\n    if (this.width) {\n      style.width = this.width;\n    }\n\n    if (this.height) {\n      style.height = this.height;\n    }\n\n    return style;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host role=\"progressbar\" aria-busy=\"true\">\n        <div\n          class={combineClasses(\n            \"vds-skeleton\",\n            `vds-skeleton__variant--${this.variant}`\n          )}\n          style={this.getStyles()}\n          aria-hidden=\"true\"\n         ></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-stepper-item-header.js.map

@@ -1 +0,0 @@
-{"file":"vds-stepper-item-header.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,q5/BAAq5/B,CAAC;;MCOh7/BA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAA,WAAA,CAAA;AALjC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAWU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAa,CAAA,aAAA,GAAsB,MAAM;AAqBlD;IAnBC,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACpC,YAAA,OAAO,IAAI;;AAEb,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,IAAI;gBAC/B,mCAAmC,EAAE,IAAI,CAAC,QAAQ;AAClD,gBAAA,CAAC,uCAAuC,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;AACpE,aAAA,EAAA,EAEA,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EAC5E,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sCAAsC,EAAE,EAAA,IAAI,CAAC,WAAW,CAAO,CAC3F,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsStepperItemHeader","__stencil_proxyCustomElement"],"sources":["src/components/stepper-item-header/vds-stepper-item-header.scss?tag=vds-stepper-item-header&encapsulation=shadow","src/components/stepper-item-header/vds-stepper-item-header.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n\n  .vds-stepper-item-header {\n    &__title {\n      @include font-style(body, large);\n      color: var(--color-text-high);\n    }\n\n    &__description {\n      @include font-style(body, large);\n      color: var(--color-text-medium);\n    }\n\n    &--disabled {\n      .vds-stepper-item-header__title,\n      .vds-stepper-item-header__description {\n        color: var(--color-text-disabled);\n      }\n    }\n\n    &--text-align-left {\n      text-align: left;\n    }\n\n    &--text-align-center {\n      text-align: center;\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'vds-stepper-item-header',\n  styleUrl: 'vds-stepper-item-header.scss',\n  shadow: true,\n})\nexport class VdsStepperItemHeader {\n  /** Define the text in the title label */\n  @Prop() title: string;\n  /** Define the text in the description label */\n  @Prop() description: string;\n  /** Sets the stepper item header in disabled state */\n  @Prop() disabled: boolean = false;\n  /** Sets the text alignment */\n  @Prop() textAlignment: 'center' | 'left' = 'left';\n\n  render() {\n    if (!this.title && !this.description) {\n      return null;\n    }\n    return (\n      <Host>\n        <div\n          class={{\n            'vds-stepper-item-header': true,\n            'vds-stepper-item-header--disabled': this.disabled,\n            [`vds-stepper-item-header--text-align-${this.textAlignment}`]: true,\n          }}\n        >\n          {this.title && <div class=\"vds-stepper-item-header__title\">{this.title}</div>}\n          {this.description && <div class=\"vds-stepper-item-header__description\">{this.description}</div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-stepper-item.js.map

@@ -1 +0,0 @@
-{"file":"vds-stepper-item.js","mappings":"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","names":["VdsStepperItem","__stencil_proxyCustomElement"],"sources":["src/components/stepper-item/vds-stepper-item.scss?tag=vds-stepper-item&encapsulation=shadow","src/components/stepper-item/vds-stepper-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n\n  .vds-stepper-item {\n    background-color: transparent;\n    border: none;\n    border-radius: var(--radius-medium);\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    width: 100%;\n\n    &:hover {\n      background-color: var(--color-interaction-black-lowest);\n    }\n\n    &:active {\n      background-color: var(--color-interaction-black-lower);\n    }\n\n    &__header {\n      display: flex;\n      gap: var(--spacing-03);\n      padding: var(--spacing-02) var(--spacing-03);\n      white-space: nowrap;\n    }\n\n    &__content {\n      display: none;\n\n      &.vds-stepper-item__content--visible {\n        display: flex;\n        width: 100%;\n\n        vds-divider {\n          padding: 0 var(--spacing-04);\n          height: unset;\n\n          &.divider-no-visible {\n            --color-border-low: transparent;\n          }\n        }\n\n        ::slotted([slot=\"item-content\"]) {\n          flex-grow: 1;\n        }\n      }\n    }\n\n    &--text-align-left {\n      .vds-stepper-item__header {\n        flex-direction: row;\n        align-items: center;\n      }\n    }\n\n    &--text-align-center {\n      .vds-stepper-item__header {\n        align-items: center;\n        flex-direction: column;\n      }\n    }\n\n    &__circle {\n      width: 1.5rem;\n      height: 1.5rem;\n      min-width: 1.5rem;\n      min-height: 1.5rem;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      background-color: var(--color-background-brand-default);\n\n      &--completed {\n        background-color: var(--color-icon-healthy);\n      }\n\n      &--error {\n        background-color: var(--color-icon-danger);\n      }\n\n      &--disabled {\n        background-color: var(--color-icon-disabled);\n      }\n\n      &-text {\n        @include font-style(body, small);\n        color: var(--static-white);\n      }\n    }\n  }\n\n  .vds-stepper-item--header-section {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  vds-divider {\n    min-height: 2rem;\n    min-width: 1px;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n\n:host-context(.vds-vertical-stepper.vds-vertical-stepper-left-aligned) {\n  .vds-stepper-item  {\n    display: flex;\n  }\n  .vds-stepper-item__header {\n    height: fit-content;\n  }\n}\n\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'vds-stepper-item',\n  styleUrl: 'vds-stepper-item.scss',\n  shadow: true,\n})\nexport class VdsStepperItem {\n  /** Sets the text alignment */\n  @Prop() textAlignment: 'center' | 'left' = 'left';\n  /** Sets the stepper in disabled state */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Sets the stepper state */\n  @Prop() state: 'default' | 'completed' | 'error' = 'default';\n  /** Sets the text inside the circle in the stepper */\n  @Prop() text: string = '';\n  /** Sets the icon inside the circle in the stepper. When set, the icon will override the text value */\n  @Prop() icon: string = '';\n  /**  \n   * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n   * When true, the item stepper can render divider and activeContent\n   */\n  @Prop() manageContent: boolean = false;\n  /**  \n   * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n   * When true, the item stepper display the slot content of the element \n   * without being manage by the `vds-vertical-stepper` or `vds-horizontal-stepper`\n   */\n  @Prop() activeContent: boolean = false;\n  /**  \n   * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\n   * When true, the item stepper renders a vds-divider after the header\n   */\n  @Prop() divider: boolean = false;\n\n  /** Emits event when item is selected */\n  @Event() selected: EventEmitter<MouseEvent>;\n\n  @Element() hostEl: HTMLElement;\n\n  componentDidLoad() {\n    this.updateStepperHeader();\n  }\n\n  @Watch('textAlignment')\n  @Watch('disabled')\n  onPropsChange() {\n    this.updateStepperHeader();\n  }\n\n  private updateStepperHeader() {\n    try {\n      const stepperHeader = this.hostEl.querySelector('vds-stepper-item-header[slot=\"item-header\"]') as HTMLVdsStepperItemHeaderElement;\n      if (stepperHeader) {\n        stepperHeader.textAlignment = this.textAlignment;\n        stepperHeader.disabled = this.disabled;\n      }\n    } catch (e) {\n      console.warn('updateStepperHeader warning: ', e);\n    }\n  }\n\n  private onClick = (evt: MouseEvent) => {\n    if (!this.disabled) {\n      this.selected.emit(evt);\n    }\n  };\n\n  private renderCircleContent() {\n    if (this.icon) {\n      return <vds-icon class=\"vds-stepper-item__circle-icon\" svgIcon={this.icon} color={this.disabled ? 'color-icon-disabled' : 'static-white'} />;\n    }\n    if (this.text) {\n      return <span class=\"vds-stepper-item__circle-text\">{this.text}</span>;\n    }\n    return null;\n  }\n\n  renderCircle() {\n    return (\n      <div\n        class={{\n          'vds-stepper-item__circle': true,\n          [`vds-stepper-item__circle--${this.state}`]: true,\n          'vds-stepper-item__circle--disabled': this.disabled,\n        }}\n      >\n        {this.renderCircleContent()}\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled, [`vds-stepper-item--text-align-${this.textAlignment}`]: this.manageContent, }}>\n        {this.manageContent && (\n          [\n            <div class=\"vds-stepper-item--header-section\">\n              <button\n                class={{\n                  'vds-stepper-item': true,\n                  [`vds-stepper-item--text-align-${this.textAlignment}`]: true,\n                }}\n                onClick={this.onClick}\n                tabIndex={this.disabled ? -1 : 0}\n                disabled={this.disabled}\n              >\n                <div class=\"vds-stepper-item__header\">\n                  {this.renderCircle()}\n                  <slot name=\"item-header\"></slot>\n                </div>\n              </button>\n              {this.divider && this.textAlignment === \"center\" && (<vds-divider orientation='vertical'></vds-divider>)}\n            </div>,\n            <div class=\"vds-stepper-item__content-cotainer\" slot={this.textAlignment === \"center\" ? \"vertical-stepper\" : undefined}>\n              <div class={`vds-stepper-item__content ${this.activeContent ? \"vds-stepper-item__content--visible\" : \"\"}`}>\n                {this.textAlignment === \"left\" && (<vds-divider orientation='vertical' class={this.divider ? \"\" : \"divider-no-visible\"}></vds-divider>)}\n                <slot name=\"item-content\"></slot>\n              </div>\n            </div>\n          ]\n        )}\n        {!this.manageContent && (\n          <button\n          class={{\n            'vds-stepper-item': true,\n            [`vds-stepper-item--text-align-${this.textAlignment}`]: true,\n          }}\n          onClick={this.onClick}\n          tabIndex={this.disabled ? -1 : 0}\n          disabled={this.disabled}\n        >\n          <div class=\"vds-stepper-item__header\">\n            {this.renderCircle()}\n            <slot name=\"item-header\"></slot>\n          </div>\n          <div class=\"vds-stepper-item__content\">\n            <slot name=\"item-content\"></slot>\n          </div>\n        </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-switch.js.map

@@ -1 +0,0 @@
-{"file":"vds-switch.js","mappings":"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","names":["VdsSwitch","__stencil_proxyCustomElement"],"sources":["src/components/switch/vds-switch.scss?tag=vds-switch&encapsulation=shadow","src/components/switch/vds-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  --vds-switch-state-off: var(--color-background-brand-press);\n  --vds-switch-state-on: var(--color-background-brand-default);\n\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-switch__container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-sizing: content-box;\n    border: var(--spacing-01) solid transparent;\n    appearance: none;\n\n    .switch-label::part(label) {\n      cursor: pointer;\n    }\n\n    .vds-switch {\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-switch__container--label-alignment-start {\n      flex-direction: row-reverse;\n    }\n\n    &.vds-switch__container--label-alignment-end {\n      flex-direction: row;\n    }\n\n    &.vds-switch__container--size-medium {\n      gap: var(--spacing-03);\n      padding: calc(var(--spacing-03) - 0.125rem);\n      .switch-icon {\n        width: var(--spacing-06);\n        height: var(--spacing-06);\n      }\n    }\n    &.vds-switch__container--size-large {\n      gap: var(--spacing-04);\n      padding: calc(var(--spacing-04) - 0.125rem);\n      .switch-icon {\n        width: var(--spacing-07);\n        height: var(--spacing-07);\n      }\n    }\n\n    .switch-icon::part(svg-icon) {\n      color: var(--vds-switch-state-off);\n      fill: var(--vds-switch-state-off);\n    }\n    &.vds-switch--checked {\n      .switch-icon::part(svg-icon) {\n        color: var(--vds-switch-state-on);\n        fill: var(--vds-switch-state-on);\n      }\n    }\n    &.vds-switch--disabled {\n      .switch-icon::part(svg-icon) {\n        color: var(--color-icon-general);\n        fill: var(--color-icon-general);\n      }\n    }\n  }\n\n  .switch-icon-off::part(svg-icon) {\n    color: var(--color-icon-general);\n    fill: var(--color-icon-general);\n  }\n}\n\n:host-context(.vds-switch--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Element, Event, EventEmitter, AttachInternals, Watch, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-switch',\n  styleUrl: 'vds-switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsSwitch {\n  /** Sets the text to be shown in the switch */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n  /** Sets the switch in checked state */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /** Sets the switch in disabled state */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  /** Sets the switch's size */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false;\n  /** Sets the value in the input. Usually uses checked prop as string. \n  *  Used to manage Reactive forms and other native functionality */\n  @Prop({ reflect: true, mutable: true }) value: string;\n  /** Aligns the label in relation to the switch*/\n  @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\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\n  private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setSwitchState();\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 switch is being click.\n   * Executes toggleCheck method.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(_: MouseEvent): void {\n\t\tthis.toggleCheck();\n\t}\n\n   /**\n   * Toggles switch value.\n   * Emits check event with checked value.\n   *\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(): Promise<void> {\n    if (!this.disabled) {\n      const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n      this.value = this.checked.toString();\n\t\t\tthis.check.emit(this.checked);\n      this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Determine state of the switch 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 setSwitchState(): 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 renderSwitch(): HTMLStencilElement {\n    const size = getIconSize(this.size);\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class=\"switch-icon\" svgIcon={`switch-on`} size={size}></vds-icon>;\n      default:\n        return <vds-icon class=\"switch-icon switch-icon-off\" svgIcon={`switch-off`} size={size}></vds-icon>;\n    }\n  }\n\n   /**\n   * Returns the vds-label for the switch when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label\n      class={\"switch-label\"}\n      labelValue={this.labelValue}\n      required={this.isRequired}\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-switch--disabled\" : \"\"}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds-switch__container\",\n            `vds-switch__container--size-${this.size}`,\n            `vds-switch__container--label-alignment-${this.labelAlignment}`,\n            this.checked ? \"vds-switch--checked\" : \"\",\n            this.disabled ? \"vds-switch--disabled\" : \"\"\n          )}\n        >\n          <div class=\"vds-switch\">\n            <input\n              type={\"checkbox\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderSwitch()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-tab.js.map

@@ -1 +0,0 @@
-{"file":"vds-tab.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,sylCAAsylC,CAAC;;MCQnzlCA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;AASE;;;;AAIG;AACqC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAaxC,QAAA,IAAI,CAAA,IAAA,GAAyD,SAAS;AAoMhG;AArLC,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACtG,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACpC,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;;;IAM5B,iBAAiB,GAAA;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG5B,YAAY,GAAA;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,GAAE,IAAI,CAAC,IAAI,GAAG,IAAI;QAC3F,IAAI,SAAS,EAAE;YACb,QACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,0BAA0B,EAAA,EACpC,CAAA,CAAA,UAAA,EAAA,EACE,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,IAAI,CAAC,QAAQ,GAAG,0BAA0B,GAAG,mBAAmB,EAC/G,IAAI,EAAC,SAAS,EACL,CAAA,CACN;;aAEJ;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,+HAA+H,CAAC;;;IAIzI,wBAAwB,GAAA;AAC9B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,8BAA8B,EAAA,EACxC,CACE,CAAA,iBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,YAAY,EAAE,IAAI,CAAC,eAAe,EAClC,OAAO,EAAE,CAAC,GAAe,KAAI;AAC3B,oBAAA,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC;iBAChC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACN,CACd;;aAEJ;AACL,YAAA,OAAO,CAAC,IAAI,CAAC,6FAA6F,CAAC;;;IAGvG,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AAC3E,YAAA,OAAO,CAAC,IAAI,CAAC,yGAAyG,CAAC;;QAEzH,QACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EACT,cAAc,CACZ,iBAAiB,EAAE,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,EAAE,EAAE,IAAI,CAAC,QAAQ,GAAG,0BAA0B,GAAG,EAAE,EACjH,IAAI,CAAC,IAAI,KAAG,SAAS,GAAG,yBAAyB,GAAG,EAAE,EACtD,IAAI,CAAC,IAAI,KAAG,MAAM,GAAG,sBAAsB,GAAG,EAAE,EAChD,IAAI,CAAC,IAAI,KAAG,YAAY,GAAG,6BAA6B,GAAG,EAAE,EAC7D,IAAI,CAAC,IAAI,KAAG,YAAY,IAAI,IAAI,CAAC,KAAK,GAAG,yCAAyC,GAAG,EAAE,EACvF,IAAI,CAAC,IAAI,KAAG,YAAY,IAAI,IAAI,CAAC,QAAQ,GAAG,6CAA6C,GAAG,EAAE,CAC/F,EAEA,EAAA,IAAI,CAAC,KAAK,CACN;;IAGH,mBAAmB,GAAA;AACzB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC3B,IAAI,CAAC,YAAY,EAAE,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,mCAAmC,EAAQ,CAAA,EACtD,IAAI,CAAC,aAAa,EAAE,CACjB;;IAGF,gBAAgB,GAAA;AACtB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,YAAY,EAAE,CAAO;;IAInD,sBAAsB,GAAA;AAC5B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,+BAA+B,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAE,GAAG,EAAA,EAC7E,IAAI,CAAC,YAAY,EAAE,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,mCAAmC,EAAQ,CAAA,EACtD,IAAI,CAAC,aAAa,EAAE,EACrB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,mCAAmC,EAAA,CAAQ,CACjD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kCAAkC,EAC1C,EAAA,IAAI,CAAC,wBAAwB,EAAE,CAC5B,CACF;;IAGF,kBAAkB,GAAA;QACxB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,oBAAoB,EAAQ,CAAA,CACnC;;IAGA,gBAAgB,GAAA;AACxB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,aAAa,EAAE,CACjB;;;IAIF,OAAO,GAAA;AACb,QAAA,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,SAAS,EAAE;AACd,gBAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE;;YAEnC,KAAK,MAAM,EAAE;AACX,gBAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE;;YAEhC,KAAK,YAAY,EAAE;AACjB,gBAAA,OAAO,IAAI,CAAC,sBAAsB,EAAE;;YAEtC,KAAK,QAAQ,EAAE;AACb,gBAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;;YAElC,KAAK,MAAM,EAAE;AACX,gBAAA,OAAO,IAAI,CAAC,gBAAgB,EAAE;;;;AAI5B,IAAA,WAAW,CAAC,GAAe,EAAA;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACpC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;;AAGrB,IAAA,qBAAqB,CAAC,GAAe,EAAA;AAC3C,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;YAC9B,GAAG,CAAC,eAAe,EAAE;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAKlB,QAAQ,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE;;AAC/B,aAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACxB,YAAA,OAAO,EAAE,iBAAiB,EAAE,IAAI,CAAC,QAAQ,EAAE;;aACtC;AACL,YAAA,OAAO,EAAE;;;IAIb,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EAAA,EAC5E,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,cAAc,CAAC,4BAA4B,EAAE,IAAI,CAAC,QAAQ,GAAG,kBAAkB,GAAG,EAAE,EAAE,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,CAAC,EACvI,IAAI,EAAC,KAAK,EAAA,YAAA,EACE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,EAC9D,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAE,GAAG,EACnC,OAAO,EAAE,CAAC,GAAe,KAAI;AACzB,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;AACvB,aAAC,EAAA,EAEH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,OAAO,EAAE,CACX,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,0BAA0B,GAAG,mBAAmB,EAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsTab","__stencil_proxyCustomElement"],"sources":["src/components/tab/vds-tab.scss?tag=vds-tab&encapsulation=shadow","src/components/tab/vds-tab.tsx"],"sourcesContent":["@import \"~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations\";\n:host {\n  display: block;\n  box-sizing: border-box;\n  border-radius: var(--radius-medium);  \n  height: 2.25rem;\n  width: var(--tab-width, fit-content);\n  @if (--tab-max-width) {\n    max-width: var(--tab-max-width);\n  }\n  .vds__tab {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 2.25rem;\n    width: var(--tab-width, fit-content);\n    @if (--tab-max-width) {\n      max-width: var(--tab-max-width);\n    }    \n    box-sizing: border-box;\n    border: none;\n    box-shadow: 0 0 0 0.125rem inset transparent;\n    &:focus-visible {\n      border-radius: var(--radius-medium);\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n    &:hover {\n      background-color: transparent;\n      border-radius: var(--radius-medium);\n      .vds__tab--label{\n        color: var(--color-text-high);\n      }\n      vds-icon {\n        fill: var(--color-icon-high);\n      }\n    }    \n  }\n  .vds__tab--with-action-content{\n    &:focus-within{\n      ~ .vds__tab--with-action ~ .vds__tab-container ~ .vds__tab {\n        border-radius: var(--radius-medium);\n        outline: 0.125rem solid var(--color-border-focus-2);\n        outline-offset: 0.125rem;\n      }\n    }\n  }\n  .vds__tab--with-action-actionable{\n    height: 1.25rem;\n    width: 1.25rem;    \n  }\n  .vds__tab--active {\n    border-radius: var(--radius-medium);\n    &:hover {\n      background-color: transparent;\n      .vds__tab--label{\n        color: var(--color-link-default);\n      }\n      vds-icon {\n        fill: var(--color-icon-brand-default);\n      }\n    } \n  }\n  .vds__tab--disabled {\n    pointer-events: none;\n  }\n  .vds__tab--spacing {\n    padding: var(--spacing-03) var(--spacing-00)  var(--spacing-03)  var(--spacing-00);\n  }\n  .vds__tab--content {\n    display: none;\n  }\n  .vds__tab--content-active {\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    cursor: auto;\n  }\n  .vds__tab--spacing-between-content {\n    padding-left: var(--spacing-03);\n  }\n  .vds__tab--label {\n    @include font-style(title, small);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-style: normal;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-wrap: nowrap;\n  }\n  .vds__tab--label-default {\n    @if (--tab-max-width) {\n      max-width: calc(var(--tab-max-width) - 1.70rem);\n    }\n  }\n  .vds__tab--label-text {\n    @if (--tab-max-width) {\n      max-width: var(--tab-max-width);\n    }\n  }\n  .vds__tab--label-with-action{\n    width: fit-content;\n  }\n  .vds__tab--label-with-action-fixed-max-width{\n    @if(--tab-max-width){\n      max-width: calc(var(--tab-max-width, 100%) - 3.5rem);\n    }\n  }\n  .vds__tab--label-with-action-fixed-width{\n    @if(--tab-width) {\n      width: calc(var(--tab-width, fit-content)  - 3.5rem);\n    }\n  }\n  .vds__tab--label-disabled {\n    color: var(--color-text-disabled);\n  }\n  .vds__tab--label-active {\n    color: var(--color-link-default);\n  }\n  .vds__tab-container {\n    align-self: flex-start;\n    width: var(--tab-width, fit-content);\n    height: 1.25rem;\n  }\n  .vds__tab--default {\n    display: inline-flex;\n    justify-content: center;\n    color: var(--color-text-medium);\n    background-color: transparent;\n    line-height: 1.25rem;\n    width: var(--tab-width, fit-content);\n  }\n\n  .vds__tab--text {\n    display: inline-flex;\n    justify-content: center;\n    color: var(--color-text-medium);\n    background-color: transparent;\n    line-height: 1.25rem;\n    width: var(--tab-width, fit-content);\n  }\n\n  .vds__tab--with-action {\n    display: inline-flex;\n    align-items: flex-start;\n    justify-content: center;\n    color: var(--color-text-medium);\n    background-color: transparent;\n    line-height: 1.25rem;\n    width: var(--tab-width, fit-content);\n    .vds__tab--with-action-content {\n      display: inline-flex;\n    }\n  }\n  .vds__tab--icon {\n    display: inline-block;\n    width: var(--tab-width, fit-content);\n    height: 1.25rem;\n    .vds__tab--icon-container {\n      display: inline-block;\n    }\n  }\n  \n  .vds__tab--action-icon-button {\n    display: inline-flex;\n    height: 1.25rem;\n    width: 1.25rem;\n    box-sizing: border-box;\n  }\n\n  .vds__tab--custom {\n    display: inline-flex;\n    padding: var(--spacing-01);\n    width: var(--tab-width, fit-content);\n  }\n}\n:host(:hover) {\n  cursor: pointer;\n}\n\n:host-context(.vds__tab--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Element, Listen, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-tab',\n  styleUrl: 'vds-tab.scss',\n  shadow: true,\n})\nexport class VdsTab {\n  @Element() hostEl: HTMLElement;\n  /** Sets tab title. The value of this property is used by default as an aria-label too. */\n  @Prop() value: string;\n  /** \n   * @deprecated This property is now being overridden by the VdsTabsGroup, \n   * the activeTabIndex property is the new preferred way of setting the default tab. \n   * Sets tab to active state.\n   */\n  @Prop({ mutable: true, reflect: true }) isActive: boolean = false;\n  /** Sets tab to disable state */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n  /** \n   * @deprecated This property is being replaced by informativeIcon. \n   * Sets tab icon. The tab icon is only a visual representation. \n   */\n  @Prop({ mutable: true }) icon?: string;\n  /** Sets tab icon. The tab icon is only a visual representation. */\n  @Prop({ mutable: true }) informativeIcon?: string;\n  /** Sets tab fixed width. This property can't be used at the same time with the property maxWidth */\n  @Prop({ mutable: true }) width: string;\n  /** Sets tab maxWidth. This property can't be used at the same time with the property width */\n  @Prop({ mutable: true }) maxWidth: string;\n  /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */\n  @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom'= 'default';\n  /** Sets tab action icon button. Only available selecting withAction type. */\n  @Prop({ mutable: true }) actionIcon: string;\n  /** Sets tab action icon button aria-label*/\n  @Prop({ mutable: true }) actionAriaLabel: string;\n  /** Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property. */\n  @Prop({ mutable: true }) setAriaLabel: string;\n  /** Emits event when the tab is selected (sets isActive prop to true) */\n  @Event() isSelected: EventEmitter<MouseEvent>;\n  /** Emits event when the action icon button is clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n  /** Emits event when the value is changed */\n  @Event() valueChanged: EventEmitter<string>;\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if ((event.target as HTMLElement).nodeName === \"VDS-TAB\" && event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault(); \n      if (!this.isActive && !this.disabled) {\n        this.isActive = true;\n        this.isSelected.emit();\n      }\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.valueChanged.emit(this.value);\n  }\n\n  private generateIcon() {\n    const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon? this.icon : null;\n    if (iconToUse) {\n      return (\n        <span class=\"vds__tab--icon-container\">\n          <vds-icon \n            svgIcon={iconToUse} \n            color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium'}\n            size=\"1.25rem\">\n          </vds-icon>\n        </span>\n      );\n    } else {\n      console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');\n    }\n  }\n\n  private generateActionIconButton() {\n    if (this.actionIcon) {\n      return (\n        <span class=\"vds__tab--action-icon-button\">\n          <vds-icon-button\n            icon={this.actionIcon}\n            variant=\"tertiary\"\n            size=\"small\"\n            setAriaLabel={this.actionAriaLabel}\n            onClick={(evt: MouseEvent) => {\n              this.handleActionIconClick(evt);\n            }}\n            disabled={this.disabled}\n          ></vds-icon-button>\n        </span>\n      );\n    } else {\n      console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');\n    }\n  }\n  private generateLabel() {\n    if ((this.value === undefined || this.value === '') && this.type !== 'icon') {\n      console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');\n    }  \n    return (\n      <span class={\n        combineClasses(\n          'vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '',\n          this.type==='default' ? 'vds__tab--label-default' : '',\n          this.type==='text' ? 'vds__tab--label-text' : '',\n          this.type==='withAction' ? 'vds__tab--label-with-action' : '',\n          this.type==='withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '',\n          this.type==='withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : ''\n        )}\n      >\n        {this.value}\n      </span>\n    );\n  }\n  private generateTypeDefault() {\n    return (\n      <div class=\"vds__tab--default\">\n        {this.generateIcon()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        {this.generateLabel()}\n      </div>\n    );\n  }\n  private generateTypeIcon() {\n    return (\n      <div class=\"vds__tab--icon\">{this.generateIcon()}</div>\n    );\n  }\n\n  private generateTypeWithAction() {\n    return (\n      <div class=\"vds__tab--with-action\">\n        <div class=\"vds__tab--with-action-content\" tabindex={this.disabled ? \"-1\" :\"0\"}>\n        {this.generateIcon()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        {this.generateLabel()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        </div>\n        <div class=\"vds__tab--with-action-actionable\">\n          {this.generateActionIconButton()}\n        </div>\n      </div>\n    );\n  }\n  private generateTypeCustom() {\n    return (\n      <div class=\"vds__tab--custom\">\n        <slot name=\"tab-header-content\"></slot>\n      </div>\n    );\n  }\n    private generateTypeText() {\n    return (\n      <div class=\"vds__tab--text\">\n        {this.generateLabel()}\n      </div>\n    );\n  }\n  // getType: return the formatted content\n  private getType() {\n    switch (this.type) {\n      case 'default': {\n        return this.generateTypeDefault();\n      }\n      case 'icon': {\n        return this.generateTypeIcon();\n      }\n      case 'withAction': {\n        return this.generateTypeWithAction();\n      }\n      case 'custom': {\n        return this.generateTypeCustom();\n      }\n      case 'text': {\n        return this.generateTypeText();\n      }\n    }\n  }\n  private handleClick(evt: MouseEvent): void {\n    if (!this.isActive && !this.disabled) {\n      this.isActive = true;\n      this.isSelected.emit(evt);\n    }\n  }\n  private handleActionIconClick(evt: MouseEvent): void {\n    if (this.type === 'withAction') {\n      evt.stopPropagation();\n      this.clicked.emit(evt);\n    }\n  }\n  \n  // setStyle define the width depending the properties prioritizing the width over the maxWidth\n  private setStyle() {\n    if (this.width) {\n      return { '--tab-width': this.width };\n    } else if (this.maxWidth) {\n      return { '--tab-max-width': this.maxWidth };\n    } else {\n      return {};\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.setStyle()} class={this.disabled ? 'vds__tab--disabled' : ''}>\n        <div\n          class={combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : '')}\n          role=\"tab\"\n          aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n          tabindex={this.disabled ? \"-1\" :\"0\"}\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n        >\n          <div class=\"vds__tab-container\">\n            {this.getType()}\n          </div>\n        </div>\n        <div class={this.isActive ? 'vds__tab--content-active' : 'vds__tab--content'}>\n          <slot name=\"tab-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-tabs-group.js.map

@@ -1 +0,0 @@
-{"file":"vds-tabs-group.js","mappings":"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","names":["VdsTabsGroup","__stencil_proxyCustomElement"],"sources":["src/components/tabs-group/vds-tabs-group.scss?tag=vds-tabs-group&encapsulation=shadow","src/components/tabs-group/vds-tabs-group.tsx"],"sourcesContent":[":host {\n  display: block;\n  .vds__tabs-group {\n    display: block;\n  }\n\n  .vds__tabs-group--header {\n    display: inline-flex;\n    position: relative;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    &.vds__tabs-group--header-tabs-show-track:after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: var(--border-thickness-05);\n      border-radius: var(--radius-medium);\n      background-color: var(--color-border-lowest);\n    }\n  }\n  .vds__tabs-group--active-tab-indicator {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    height: var(--border-thickness-05);\n    border-radius: var(--radius-medium);\n    background-color: var(--color-border-brand);\n    transition: 150ms;\n  }\n  .vds__tabs-group--header-tabs-flex-start {\n    justify-content: flex-start;\n  }\n  .vds__tabs-group--header-tabs-flex-end {\n    justify-content: flex-end;\n  }\n  .vds__tabs-group--header-tabs-center {\n    justify-content: center;\n  }\n  .vds__tabs-group--header-tabs-space-around {\n    justify-content: space-around;\n  }\n  .vds__tabs-group--header-tabs-space-between {\n    justify-content: space-between;\n  }\n  .vds__tabs-group--header-tabs-nav {\n    display: inline-flex;\n    gap: var(--spacing-07);\n  }\n  .vds__tabs-group--tab-view-content {\n    padding: var(--spacing-04);\n    position: relative;\n  }\n}\n\n:host-context(.vds__tabs-group--disabled) {\n  pointer-events: none;\n}","import { Component, Host, h, State, Element, Prop, Method, Listen, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-tabs-group',\n  styleUrl: 'vds-tabs-group.scss',\n  shadow: true,\n})\nexport class VdsTabsGroup {\n  @Element() hostEl: HTMLElement;\n  /** Sets the type for the tabs group */\n  @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom' = 'default';\n  /** Sets the width for the tabs */\n  @Prop({ mutable: true }) width?: string;\n  /** Sets the max width for the tabs */\n  @Prop({ reflect: true, mutable: true }) maxWidth?: string;\n  /** Sets the alignment for the tabs */\n  @Prop({ reflect: true, mutable: true }) tabAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' = 'flex-start';\n  /** Shows the indicator track under the tab*/\n  @Prop({ mutable: true }) showTrack: boolean = false;\n  /** Sets the index to select the active tab inside the group.\n   * If not specified, loads the first tab.\n   */\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  /** Sets tab group to disable state */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n  @State() internalActiveTabIndex: number = 0;\n\n  private activeTab: HTMLVdsTabElement;\n  private tabsGroupContainer: HTMLDivElement;\n  private indicatorEl: HTMLDivElement;\n  private tabs: HTMLVdsTabElement[] = [];\n  private resizeObserver: ResizeObserver;\n\n\n  @Listen('isSelected')\n  handleTabSelection(evt: CustomEvent): void {\n    const target = evt.target as HTMLElement;\n    this.internalActiveTabIndex = Number(target?.getAttribute('vds-tabindex')) || 0;\n    this.activeTabIndex = this.internalActiveTabIndex;\n    this.updateTabsState(this.tabs);\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(): void {\n    this.updateIndicatorPosition();\n    forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    this.setTabs();\n  }\n\n  componentWillRender() {\n    this.setTabs();\n  }\n\n  componentDidRender(): void {\n    if (this.tabs.length > 0) {\n      this.observeActiveTabContent();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private observeActiveTabContent() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    if (this.activeTab) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active');\n      if (content) {\n        this.resizeObserver = new ResizeObserver(() => {\n          this.defineAttributes();\n          this.updateIndicatorPosition()\n        });\n        this.resizeObserver.observe(content);\n      }\n    }\n  }\n\n  private setTabs(): void {\n      try {\n      this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));\n      if (this.tabs.length > 0) {\n        this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length\n          ? this.activeTabIndex\n          : 0;\n        this.updateTabsState(this.tabs);\n      }\n    } catch (e) {\n      console.error('componentWillLoad Error: ', e);\n    }\n  }\n\n  @Watch('activeTabIndex')\n  handleActiveTabIndexChange() {\n    this.updateTabsState(this.tabs);\n  }\n\n  @Watch(\"disabled\")\n  setDisabledState() {\n    (this.tabs || []).forEach(tab => {\n      tab.disabled = this.disabled;\n    });\n  }\n\n  /**\n   * Gets the currently active tab index\n   * \n   * @returns {Promise<number>} A promise that resolves with the active tab index.\n   */\n  @Method()\n  public async getActive(): Promise<number> {\n    return this.internalActiveTabIndex;\n  }\n\n  /**\n   * Sets the active tab index\n   * \n   * @param {number} index - The index of the tab to set as active.\n   */\n  @Method()\n  public async setActive(index: number) {\n    this.setActiveTab(index);\n  }\n\n  private setActiveTab(index: number) {\n    if (this.tabs.length > 0) {\n      this.internalActiveTabIndex = this.validateTabIndex(index);\n      this.activeTabIndex = this.internalActiveTabIndex;\n    }\n  }\n\n  private validateTabIndex(index: number): number {\n    const isValidIndex = index >= 0 && index < this.tabs.length;\n    const isEnabled = isValidIndex && !this.tabs[index]?.disabled;\n    if (isValidIndex && isEnabled) {\n      return index;\n    }\n    const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);\n    return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;\n  }\n\n  private defineAttributes() {\n    if (this.activeTab && this.tabsGroupContainer) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active') as HTMLElement;\n      if (content) {\n        this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);\n      }\n    }\n  }\n\n  private updateIndicatorPosition() {\n    if (this.activeTab && this.indicatorEl) {\n      const tabLeft = this.activeTab.offsetLeft;\n      const tabWidth = this.activeTab.offsetWidth;\n      const parentLeft = this.indicatorEl.parentElement.offsetLeft;\n\n      this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;\n      this.indicatorEl.style.width = `${tabWidth}px`;\n    }\n  }\n\n  private renderActiveTabIndicator() {\n    return this.activeTab && (\n      <div\n        class=\"vds__tabs-group--active-tab-indicator\"\n        ref={(el: HTMLDivElement) => (this.indicatorEl = el)}\n      />\n    );\n  }\n\n  private updateTabsState(tabs: HTMLVdsTabElement[]) {\n    this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);\n    tabs.forEach((tab, tabIndex) => {\n      const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;\n      tab.isActive = isActiveTab;\n      if (isActiveTab) {\n        this.activeTab = tab;\n        this.updateIndicatorPosition();\n      }\n      tab.setAttribute('vds-tabindex', `${tabIndex}`);\n      tab.type = this.type;\n      tab.width = this.width;\n      tab.maxWidth = this.maxWidth;\n    });\n    this.defineAttributes();\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__tabs-group--disabled' : ''}>\n        <div\n          ref={(el: HTMLDivElement): void => {\n            if (!el) return;\n            this.tabsGroupContainer = el;\n          }}\n          class=\"vds__tabs-group\"\n        >\n          <div class={\n            combineClasses(\n              'vds__tabs-group--header',\n              'vds__tabs-group--header-tabs-' + this.tabAlignment,\n              this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : ''\n            )}\n          >\n            <div class=\"vds__tabs-group--header-content\">\n              <slot name=\"header-content\"></slot>\n            </div>\n            <div class=\"vds__tabs-group--header-tabs-nav\" role=\"tablist\">\n              <slot name=\"tab-list\"></slot>\n            </div>\n            {this.renderActiveTabIndicator()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-tooltip.js.map

@@ -1 +0,0 @@
-{"file":"vds-tooltip.js","mappings":"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","names":["VdsTooltip","__stencil_proxyCustomElement"],"sources":["src/components/tooltip/vds-tooltip.scss?tag=vds-tooltip&encapsulation=shadow","src/components/tooltip/vds-tooltip.tsx"],"sourcesContent":["@import \"~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations\";\n\n:host {\n  display: flex;\n  width: fit-content;\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__tooltip-arrow-img {\n    fill: var(--surface-overlay-default);\n    display: flex;\n    width: 0.5rem;\n    height: 0.25rem;\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\n@Component({\n  tag: 'vds-tooltip',\n  styleUrl: 'vds-tooltip.scss',\n  shadow: true,\n})\nexport class VdsTooltip {\n  @Element() hostEl: HTMLElement;\n  /** standard type receives the text in the \"text\" property, \"custom\" is an slot to include any html element inside the tooltip, \"manual\" allow open and close the tooltip only with the public methods  */\n  @Prop() type: \"standard\" | \"custom\" | \"manual\" = \"standard\";\n  /** Sets the tooltip text, does not apply for custom tooltip */\n  @Prop({mutable: true}) text?: string;\n  /** Defines the position where the tooltip will be opened */\n  @Prop({mutable: true}) position: 'top' | 'bottom' | 'right' | 'left' = 'top';\n  /** Sets the maximum width of the tooltip's content */\n  @Prop({mutable: true}) maxWidth: string = \"10rem\";\n  /** The type of event that will trigger the tooltip */\n  @Prop({mutable: true}) event: 'hover' | 'click' = 'hover';\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 tooltip gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when tooltip gets closes */\n  @Event() closed: EventEmitter<void>;\n  \n  floatingCleanup: () => void = () => {};\n\n  @Watch(\"popupOpened\")\n  async emitValue(): Promise<void> {\n    if (this.popupOpened){\n      this.opened.emit();\n      this.tooltipElementRef.style.display = 'inline-flex';\n      this.floatingCleanup = await updateFloatingBoxPosition(this.actionElementRef, this.tooltipElementRef, this.arrowElementRef, this.position, this.autoPosition);\n    }\n    else{\n      this.closed.emit();\n      this.tooltipElementRef.style.display = 'none';\n      this.floatingCleanup();\n    }\n  }\n\n  /* Close the tooltip 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 && this.type !== 'manual') {\n      this.popupOpened = false;\n    }\n  }\n\n  /* Open the tooltip with click on the trigger element  */\n  @Listen('click')\n  private handleClick(event: Event): void {\n    if (this.event === 'click' && this.type !== 'manual') {\n      const clickedElement = event.target as HTMLElement;\n      if (clickedElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n\n  /* Open the tooltip from other element  */ \n  @Method()\n  public async open(): Promise<void> {\n    this.popupOpened = true;\n  }\n\n  /* Close the tooltip 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 tooltip\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__tooltip-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 setMaxWidth(){\n    return {'--tooltip-max-width': this.maxWidth} \n  }\n  \n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private tooltipElementRef: HTMLElement;\n  \n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__tooltip-trigger');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__tooltip-arrow');\n    this.tooltipElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__tooltip-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.setMaxWidth()}>\n        <div class=\"vds__tooltip-trigger\"\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);              \n          }}\n          ref={(triggerEl) => { if(triggerEl)this.actionElementRef = triggerEl; }}\n          \n        >\n          <slot name=\"tooltip-trigger\"></slot>\n        </div>\n        <div\n          class=\"vds__tooltip-container\" \n          ref={(tooltipEl) => {  if(tooltipEl)this.tooltipElementRef = tooltipEl; }}\n        >          \n          <div>\n            { this.type ==='standard'|| this.type ==='manual'?<span class=\"vds__tooltip-container-text\">{this.text}</span> : <slot name=\"tooltip-content\"></slot>}\n          </div>\n          <div class=\"vds__tooltip-arrow\" ref={(tooltipArrowEl) => {  if(tooltipArrowEl)this.arrowElementRef = tooltipArrowEl; }}>\n            <svg class=\"vds__tooltip-arrow-img\" width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"tooltip-caret-filled-small\" d=\"M0 0L4 4L8 0H0Z\" fill=\"var(--surface-overlay-default)\"/>\n            </svg>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/vds-upload-drag.js.map

@@ -1 +0,0 @@
-{"file":"vds-upload-drag.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,kghCAAkghC,CAAC;;MCQthhCA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,2CAA2C;;AAE3D,QAAA,IAAW,CAAA,WAAA,GACjB,wGAAwG;;AAGlG,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AASvB,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAI5B,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,KAAgB,KAAI;YAC5C,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM;AACtC,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACxB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAgB,KAAI;YAC7C,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACzB,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAgB,KAAI;;YACxC,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;YACvB,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK;YACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;AAEvC,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;;YACzB,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AACzB,SAAC;AAEO,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;;YACnC,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK;YACnC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;AAEvC,SAAC;AAuCF;AArCS,IAAA,WAAW,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG/B,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EAEvB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACpD,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EACN,IAAA,EAAA,CAAA,EACF,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAC,YAAY,EACpB,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAEnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,yBAAyB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACF,CACG,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsUploadDrag","__stencil_proxyCustomElement"],"sources":["src/components/upload-drag/vds-upload-drag.scss?tag=vds-upload-drag&encapsulation=shadow","src/components/upload-drag/vds-upload-drag.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  cursor: pointer;\n\n  --vds-upload-drag-icon-gap: var(--spacing-05);\n\n  --vds-upload-drag-border-color: var(--color-border-low);\n  --vds-upload-drag-border-drag-color: var(--color-border-brand);\n  --vds-upload-drag-background-color: var(--surface-medium);\n  --vds-upload-drag-background-drag-color: rgba(0, 125, 186, 0.04);\n\n  vds-card {\n    --vds-card-default-border-color: var(--vds-upload-drag-border-color);\n    --vds-card-default-background-color: var(--vds-upload-drag-background-color);\n\n    &.vds-card--drag-active {\n      --vds-card-default-border-color: var(--vds-upload-drag-border-drag-color);\n      --vds-card-default-background-color: var(--vds-upload-drag-background-drag-color);\n    }\n  }\n\n  .vds-upload__content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    gap: var(--vds-upload-icon-gap);\n\n    .vds-upload__body {\n      display: flex;\n      flex-direction: column;\n\n      .vds-upload__title {\n        color: var(--color-text-high);\n        @include font-style(title, medium);\n      }\n\n      .vds-upload__description {\n        color: var(--color-text-medium);\n        @include font-style(body, medium);\n      }\n    }\n\n  }\n}","import { Component, Host, h, Prop, Event, State } from '@stencil/core';\nimport { EventEmitter } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-upload-drag',\n  styleUrl: 'vds-upload-drag.scss',\n  shadow: true,\n})\nexport class VdsUploadDrag {\n  /** The title of the upload area */\n  @Prop() title: string = 'Click or drag file to this area to upload';\n  /** The description of the upload area */\n  @Prop() description: string =\n    'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files';\n\n  /** Specifies the multiple prop in the input[type=\"file\"] */\n  @Prop() multiple: boolean = true;\n  /** Specifies the accept prop in the input[type=\"file\"] */\n  @Prop() accept?: string;\n  /** Specifies the capture prop in the input[type=\"file\"] */\n  @Prop() capture?: 'user' | 'environment';\n\n  /** Emits the value of the selected files */\n  @Event() fileSelected: EventEmitter<File[]>;\n\n  @State() isDragging: boolean = false;\n\n  private fileInput?: HTMLInputElement;\n\n  private handleDragOver = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    event.dataTransfer.dropEffect = 'copy';\n    this.isDragging = true;\n  };\n\n  private handleDragLeave = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging = false;\n  };\n\n  private handleDrop = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging = false;\n    const files = event.dataTransfer?.files;\n    if (files && files.length > 0) {\n      this.handleFiles(Array.from(files));\n    }\n  };\n\n  private handleClick = () => {\n    this.fileInput?.click();\n  };\n\n  private handleFileInputChange = () => {\n    const files = this.fileInput?.files;\n    if (files && files.length > 0) {\n      this.handleFiles(Array.from(files));\n    }\n  };\n\n  private handleFiles(files: File[]) {\n    this.fileSelected.emit(files);\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={this.handleClick}\n        onDragOver={this.handleDragOver}\n        onDragLeave={this.handleDragLeave}\n        onDrop={this.handleDrop}\n      >\n        <input\n          type=\"file\"\n          ref={el => (this.fileInput = el as HTMLInputElement)}\n          onChange={this.handleFileInputChange}\n          multiple={this.multiple}\n          accept={this.accept}\n          capture={this.capture}\n          hidden\n        />\n        <vds-card\n          padding=\"spacing-09\"\n          shadowBox=\"elevation-shadow-0\"\n          class={{ 'vds-card--drag-active': this.isDragging }}\n        >\n          <div class=\"vds-upload__content\">\n            <slot name=\"icon\"></slot>\n            <div class=\"vds-upload__body\">\n              <span class=\"vds-upload__title\">{this.title}</span>\n              <span class=\"vds-upload__description\">{this.description}</span>\n            </div>\n          </div>\n        </vds-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-upload-item.js.map

@@ -1 +0,0 @@
-{"file":"vds-upload-item.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,shkCAAshkC,CAAC;;MCU1ikCA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAElB,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;;AAEnC,QAAA,IAAe,CAAA,eAAA,GAAW,aAAa;;AAEvC,QAAA,IAAM,CAAA,MAAA,GAAoC,SAAS;;AAEnD,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AACjC;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,GAAG;AA4DtC;IAvDS,qBAAqB,GAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;YAC7B,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAA,CAAA,uBAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,QAAQ,EAAE,IAAI,CAAC,eAAe,EAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,MAAM,EAC9C,CAAA,CACE;;QAGV,OAAO,uBAAuB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC;;IAG5G,aAAa,GAAA;QACnB,OAAO,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC;;AAG5E,IAAA,qBAAqB,CAAC,KAAY,EAAA;QACxC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;IAGrB,kBAAkB,GAAA;AACxB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,8BAA8B,EAAA,EACvC,CACE,CAAA,iBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,OAAO,GAAG,OAAO,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,OAAO,GAAG,QAAQ,EACjD,OAAO,EAAC,WAAW,EACnB,YAAY,EAAC,aAAa,EAC1B,OAAO,GAAG,KAAK,IAAI,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAA,CACrD,CACE;;IAIV,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,cAAc,CACxB,iBAAiB,EACjB,CAAyB,sBAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EACpC,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,CAClC,EAAA,EACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,qBAAqB,EAAE,EAC5B,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,kBAAkB,EAAE,CACtB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsUploadItem","__stencil_proxyCustomElement"],"sources":["src/components/upload-item/vds-upload-item.scss?tag=vds-upload-item&encapsulation=shadow","src/components/upload-item/vds-upload-item.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n@import '../base-item/base-item.scss';\n\n:host {\n  display: block;\n  .vds-upload-item {\n    @include baseItem();\n    cursor: default;\n    border-radius: var(--radius-medium);\n    &.vds-upload-item--size-medium {\n      @include baseItemSizeMedium();\n      .vds-upload-item__content {\n        @include baseItemContent(medium);\n      }\n    }\n    &.vds-upload-item--size-large {\n      @include baseItemSizeLarge();\n      .vds-upload-item__content {\n        @include baseItemContent(large);\n      }\n    }\n    &.vds-upload-item--error {\n      @include baseItemDanger();\n    }\n    .vds-upload-item__remove-icon {\n      opacity: 0;\n      pointer-events: none; \n      display: flex;\n      align-items: center;\n      .vds-upload-item--error & {\n        opacity: 1;\n      }\n    }\n    &:hover,\n    &:focus-within {\n      .vds-upload-item__remove-icon {\n        opacity: 1;\n        pointer-events: auto;\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event } from '@stencil/core';\nimport { EventEmitter, HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { generateInformativeIcon, generateLabel } from '../base-item/base-item';\n\n@Component({\n  tag: 'vds-upload-item',\n  styleUrl: 'vds-upload-item.scss',\n  shadow: true,\n})\nexport class VdsUploadItem {\n  /** Sets the item text value */\n  @Prop() value: string = '';\n  /** Sets the item size */\n  @Prop() size: 'large' | 'medium' = 'medium';\n  /** Sets the item informative icon */\n  @Prop() informativeIcon: string = 'link-closed';\n  /** Sets the item state */\n  @Prop() status: 'loading' | 'error' | 'default' = 'default';\n  /** Sets the percentage filled value from 0 to 100 */\n  @Prop() loadingValue: number = 75;\n  /**\n   * Sets the loop duration time for the indeterminate loop progress in miliseconds.\n   * Determinate and indeterminate state will be defined by adding or not the duration.\n   */\n  @Prop() loadingDuration: number = 500;\n\n  /** Event emitted when the icon button is clicked */\n  @Event() actionIconClick: EventEmitter<void>;\n\n  private renderInformativeIcon() {\n    if (this.status === 'loading') {\n      return (\n        <div class=\"vds-upload-item__loading-indicator\">\n          <vds-progress-circular\n            value={this.loadingValue}\n            duration={this.loadingDuration}\n            scale={this.size === 'medium' ? 0.286 : 0.3575}\n          />\n        </div>\n      );\n    }\n    return generateInformativeIcon(this.informativeIcon, this.value, this.size, false, false, this.status === 'error');\n  }\n\n  private generateLabel() {\n    return generateLabel(this.value, this.size, false, false, this.status === 'error');\n  }\n\n  private handleIconButtonClick(event: Event) {\n    event.stopPropagation();\n    this.actionIconClick.emit();\n  }\n\n  private renderRemoveButton() {\n    return (\n      <div class=\"vds-upload-item__remove-icon\">\n        <vds-icon-button\n          icon={this.status === 'loading' ? 'close' : 'trash'}\n          size={this.size === 'medium' ? 'small' : 'medium'}\n          variant=\"secondary\"\n          setAriaLabel=\"Remove item\"\n          onClick={(event => this.handleIconButtonClick(event))}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={combineClasses(\n          'vds-upload-item',\n          `vds-upload-item--size-${this.size}`,\n          `vds-upload-item--${this.status}`\n        )}>\n          <div class=\"vds-upload-item__content\">\n            {this.renderInformativeIcon()}\n            {this.generateLabel()}\n            {this.renderRemoveButton()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/base-group-header-Dv2b0x2u.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-group-header-Dv2b0x2u.js","sources":["src/components/base-group-header/base-group-header.tsx"],"sourcesContent":["import { h, HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\nexport type GroupHeaderSize = 'small' | 'medium' | 'large';\n\n/**\n * Generates a group header container with a label.\n *\n * @param {GroupHeaderSize} size - The size of the group header.\n * @param {string} value - The text value to display in the group header.\n * \n * @returns {HTMLStencilElement} The generated group header container.\n */\nexport const generateGroupHeaderContainer = (\n  size: GroupHeaderSize,\n  value?: string\n): HTMLStencilElement => {\n  return (\n    <div class={combineClasses(\n      'vds-base-group-header',\n      `vds-base-group-header--${size}`\n    )}>\n      <span class={combineClasses(\n        'vds-base-group-header__label',\n        `vds-base-group-header__label--${size}`\n      )}>\n        {value ? value : <slot></slot>}\n      </span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAKA;;;;;;;AAOG;MACU,4BAA4B,GAAG,CAC1C,IAAqB,EACrB,KAAc,KACQ;IACtB,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,CACxB,uBAAuB,EACvB,0BAA0B,IAAI,CAAA,CAAE,CACjC,EAAA,EACC,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,cAAc,CACzB,8BAA8B,EAC9B,CAAiC,8BAAA,EAAA,IAAI,CAAE,CAAA,CACxC,EAAA,EACE,KAAK,GAAG,KAAK,GAAG,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACzB,CACH;AAEV;;;;"}

package/dist/esm/base-item-BJCnJ_64.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-item-BJCnJ_64.js","sources":["src/components/base-item/base-item.tsx"],"sourcesContent":["import { h } from \"@stencil/core\";\nimport { HTMLStencilElement } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { IconColors } from \"../../components\";\n\n/**\n * Gets the appropriate icon color based on the provided conditions.\n *\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} [danger=false] - Whether the icon should indicate danger.\n * @param {boolean} [isCheckbox=false] - Whether the icon is for a checkbox.\n * \n * @returns {IconColors} The CSS variable name for the icon color.\n */\nconst getIconColor = (\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean = false,\n    isCheckbox: boolean = false\n): IconColors => {\n    switch(true) {\n        case disabled:\n            return \"color-icon-disabled\";\n        case danger:\n            return \"color-icon-danger\";\n        case isActive:\n            return isCheckbox ? \"color-icon-brand-default\" : \"color-icon-brand-press\";\n        default: \n            return \"color-icon-high\";\n    }\n}\n\n/**\n * Gets the appropriate icon size based on the provided size.\n *\n * @param {\"small\" | \"medium\" | \"large\"} size - The desired size of the icon.\n * \n * @returns {string} The CSS size value for the icon.\n */\nconst getIconSize = (size: \"small\" | \"medium\" | \"large\"): string => size === \"medium\" ? \"1rem\" : size === \"small\" ? \"0.75rem\" : \"1.25rem\"\n\n/**\n * Generates a checkmark icon button based on the provided parameters.\n *\n * @param {boolean} isSelected - Whether the item is selected.\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated checkmark icon button.\n */\nexport const generateCheckmarkIconButton = (\n    isSelected: boolean,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    if (isSelected) {\n        return (\n            <div class=\"vds-base-item__checkmark-icon\">\n              <vds-icon\n                svg-icon=\"good\"\n                size={getIconSize(size)}\n                color={getIconColor(disabled, isSelected || isActive, danger)}\n                alt=\"Selected Item\"\n              />\n            </div>\n          );\n    }\n\n    return (\n        <div class={`vds-base-item__checkmark-icon--empty-${size}`}></div>\n    );\n}\n\n/**\n * Generates an informative icon based on the provided parameters.\n *\n * @param {string} icon - The name of the SVG icon to use.\n * @param {string} value - The value associated with the icon.\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated informative icon.\n */\nexport const generateInformativeIcon = (\n    icon: string,\n    value: string,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return (\n        <div class=\"vds-base-item__informative-icon\">            \n          <vds-icon\n            svg-icon={icon}\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isActive, danger)}\n            alt={value}\n          />\n        </div>\n      );\n}\n\n/**\n * Generates a checkbox icon based on the provided parameters.\n *\n * @param {boolean} isSelected - Whether the checkbox is selected.\n * @param {\"medium\" | \"large\"} size - The desired size of the checkbox.\n * @param {boolean} disabled - Whether the checkbox is disabled.\n * @param {boolean} isActive - Whether the checkbox is active.\n * @param {boolean} danger - Whether the checkbox should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated checkbox icon.\n */\nexport const generateCheckbox = (\n    isSelected: boolean,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement  => {\n    return (\n        <div class={`vds-base-item__checkbox-icon-${size}`}>\n          <vds-icon\n            svg-icon={isSelected ? \"checked\" : \"unchecked\"}\n            class={combineClasses(isSelected ? \"checkbox-icon-checked\" : \"\", `checkbox-item-${size}`)}\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isSelected || isActive, danger, true)}\n            alt={\"checkbox-element\"}\n          />\n        </div>\n    );\n}\n\n/**\n * Generates a label element based on the provided parameters.\n\n * @param {string} label - The text content of the label.\n * @param {\"medium\" | \"large\"} size - The desired size of the label.\n * @param {boolean} disabled - Whether the label is disabled.\n * @param {boolean} isActive - Whether the label is active.\n * @param {boolean} danger - Whether the label should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated label element.\n */\nexport const generateLabel = (\n    label: string,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return (\n        <span\n            class={combineClasses(\n                \"vds-base-item__label\",\n                `vds-base-item__label--size-${size}`,\n                disabled ? \"vds-base-item__label--disabled\" : \"\",\n                isActive ? \"vds-base-item__label--active\" : \"\",\n                danger ? \"vds-base-item__label--danger\" : \"\",\n          )}\n        >\n          { label ? label :  <slot></slot> }\n        </span>\n    );\n}\n\n/**\n * Generates a children icon button based on the provided parameters.\n\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated children icon button.\n */\nexport const generateChildrenIconButton = (\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return(\n        <div class=\"vds-base-item__has-children-icon\">\n          <vds-icon\n            svg-icon=\"chevron-right\"\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isActive, danger)}\n            alt=\"Open menu\"\n          />\n        </div>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/clone-attributes-CqHfuEQc.js

@@ -1,13 +0,0 @@
-const cloneAttributes = (el, ...excludedKeys) => {
-    return Object.values(el.attributes)
-        .filter(({ name: keyName }) => !(excludedKeys === null || excludedKeys === void 0 ? void 0 : excludedKeys.some(exKey => exKey === keyName)))
-        .reduce((acc, attr) => {
-        acc = Object.assign(Object.assign({}, acc), { [attr.name]: attr.value });
-        return acc;
-    }, {});
-};
-
-export { cloneAttributes as c };
-//# sourceMappingURL=clone-attributes-CqHfuEQc.js.map
-
-//# sourceMappingURL=clone-attributes-CqHfuEQc.js.map

package/dist/esm/clone-attributes-CqHfuEQc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clone-attributes-CqHfuEQc.js","sources":["src/utils/clone-attributes.ts"],"sourcesContent":["import { JSXBase } from \"@stencil/core/internal\";\n\nexport const cloneAttributes = <\n\tX extends HTMLElement,\n\tT = JSXBase.HTMLAttributes | NamedNodeMap\n>(\n\tel: X,\n\t...excludedKeys: string[]\n): { [P in keyof T]?: T[P] } => {\n\treturn Object.values(el.attributes)\n\t\t.filter(\n\t\t\t({ name: keyName }) => !excludedKeys?.some(exKey => exKey === keyName)\n\t\t)\n\t\t.reduce((acc: { [P in keyof T]: T[P] }, attr: Attr): T => {\n\t\t\tacc = { ...acc, [attr.name]: attr.value };\n\t\t\treturn acc;\n\t\t}, {});\n};\n"],"names":[],"mappings":"AAEa,MAAA,eAAe,GAAG,CAI9B,EAAK,EACL,GAAG,YAAsB,KACK;AAC9B,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU;AAChC,SAAA,MAAM,CACN,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,CAAA;AAEtE,SAAA,MAAM,CAAC,CAAC,GAA6B,EAAE,IAAU,KAAO;QACxD,GAAG,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,GAAG,CAAE,EAAA,EAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAE;AACzC,QAAA,OAAO,GAAG;KACV,EAAE,EAAE,CAAC;AACR;;;;"}

package/dist/esm/combine-classes-B23UkaEC.js

@@ -1,6 +0,0 @@
-const combineClasses = (...classes) => classes.join(" ").trim();
-
-export { combineClasses as c };
-//# sourceMappingURL=combine-classes-B23UkaEC.js.map
-
-//# sourceMappingURL=combine-classes-B23UkaEC.js.map

package/dist/esm/combine-classes-B23UkaEC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"combine-classes-B23UkaEC.js","sources":["src/utils/combine-classes.ts"],"sourcesContent":["export const combineClasses = (...classes: string[]): string =>\n\tclasses.join(\" \").trim();\n"],"names":[],"mappings":"AAAa,MAAA,cAAc,GAAG,CAAC,GAAG,OAAiB,KAClD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI;;;;"}