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

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

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

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

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

package/dist/components/vds-icon-button.js.map

@@ -1 +0,0 @@
-{"file":"vds-icon-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/vds-icon-button.utils.js.map

@@ -1 +0,0 @@
-{"file":"vds-icon-button.utils.js","mappings":"AAAa,MAAA,SAAS,GAAG;AACrB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,QAAQ,EAAE,SAAS;AACnB,IAAA,OAAO,EAAE,QAAQ;;;;;","names":[],"sources":["src/components/icon-button/vds-icon-button.utils.ts"],"sourcesContent":["export const ICON_SIZE = {\n    \"extra-small\": \"0.75rem\",\n    \"small\": \"1rem\",\n    \"medium\": \"1.25rem\",\n    \"large\": \"1.5rem\",\n};\n"],"version":3}

package/dist/components/vds-icon-button2.js.map

@@ -1 +0,0 @@
-{"file":"vds-icon-button2.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,uklCAAuklC,CAAC;;MCY3llC,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAA,WAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOS,QAAA,IAAI,CAAA,IAAA,GAAiD,QAAQ;;AAE7D,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;;AAEzD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA4CjC;IAnCA,YAAY,GAAA;QACX,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;YAClD,IAAI,CAAC,UAAU,EAAE;;;IAIV,UAAU,GAAA;AAClB,QAAA,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC;;IAG7B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,cAAc,CAAC,CAAA,eAAA,CAAiB,EAAE,IAAI,CAAC,QAAQ,GAAG,2BAA2B,GAAG,EAAE,CAAC,EAAA,EAC9F,CACE,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACnB,CAA0B,wBAAA,CAAA,EAC1B,CAA6B,0BAAA,EAAA,IAAI,CAAC,OAAO,CAAE,CAAA,EAC3C,0BAA0B,IAAI,CAAC,IAAI,CAAA,CAAE,EACrC,IAAI,CAAC,QAAQ,GAAG,0BAA0B,GAAG,EAAE,CAChD,EACW,YAAA,EAAA,IAAI,CAAC,YAAY,EAC7B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,EAC5B,EAAA,eAAe,CACvB,IAAI,CAAC,MAAM,EACL,UAAU,EACV,OAAO,EACP,OAAO,CACR,CAAA,EAED,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,UAAA,EAAoB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,CAAa,CAC/D,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/icon-button/vds-icon-button.scss?tag=vds-icon-button&encapsulation=shadow","src/components/icon-button/vds-icon-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: fit-content;\n  button {\n    background-color: transparent;\n    border-color: transparent;\n    box-sizing: border-box;\n  }\n\n  @mixin disabledIconButton {\n    &:disabled {  \n      color: var(--color-icon-disabled);\n      pointer-events: none;\n      vds-icon {\n        color: var(--color-icon-disabled);\n        fill: var(--color-icon-disabled);\n      }\n    }\n  }\n  @mixin selectedIconButton {\n    &:active {\n      color: var(--color-icon-brand-press);\n      vds-icon {\n        color: var(--color-icon-brand-press);\n        fill: var(--color-icon-brand-press);\n      }\n    }\n  }\n\n  .vds-icon-button {\n    &__element {\n      display: flex;\n      align-items: center;\n      padding: var(--spacing-01, 0.125rem);\n      border: 0;\n      box-sizing: border-box;\n      box-shadow: none;\n      cursor: pointer;\n      border-radius: var(--radius-medium);\n      &:focus-visible {\n        outline: var(--spacing-01, 0.125rem) solid var(--color-border-focus-2);\n      }\n      &:active, &:active:hover {\n        background-color: transparent;\n      }\n    }\n    &__variant--primary {\n      background-color: transparent;\n      border-color: transparent;\n      color: var(--color-text-brand);\n      vds-icon {\n        color: var(--color-text-brand);\n        fill: var(--color-text-brand);\n      }\n      &:hover {\n        background: var(--color-interaction-brand-lowest);\n        color: var(--color-icon-brand-hover);\n        vds-icon {\n          color: var(--color-icon-brand-hover);\n          fill: var(--color-icon-brand-hover);\n        }\n      }\n      \n      @include disabledIconButton();\n      @include selectedIconButton();\n    }\n    &__variant--secondary {\n      background-color: transparent;\n      border-color: transparent;\n      color: var(--color-icon-high);\n      vds-icon {\n        color: var(--color-icon-high);\n        fill: var(--color-icon-high);\n      }\n      &:hover {\n        background: var(--color-interaction-black-lowest);\n        vds-icon {\n          color: var(--color-icon-medium);\n          fill: var(--color-icon-medium);\n        }\n      }\n      &:active {\n        color: var(--color-icon-high);\n        vds-icon {\n          color: var(--color-icon-high);\n          fill: var(--color-icon-high);\n        }\n      }\n\n      @include disabledIconButton();\n    }\n    &__variant--tertiary {\n      background-color: transparent;\n      border-color: transparent;\n      color: var(--color-icon-medium);\n      vds-icon {\n        color: var(--color-icon-medium);\n        fill: var(--color-icon-medium);\n      }\n      &:hover {\n        background: var(--color-interaction-brand-lowest);\n        color: var(--color-icon-brand-hover);\n        vds-icon {\n          color: var(--color-icon-brand-hover);\n          fill: var(--color-icon-brand-hover);\n        }\n      }\n\n      @include disabledIconButton();\n      @include selectedIconButton();\n    }\n  }\n}\n\n:host-context(.vds-icon-button--disabled) {\n  pointer-events: none;\n}\n\n:host-context(.breadcrumb) {\n  .vds-icon-button__element {\n    &:focus-visible {\n      outline: none;\n    }\n  }\n}","import { Component, Element, Host, Listen, Prop, h } from '@stencil/core';\nimport { shadowSubmitForm } from '../../utils/form';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ICON_SIZE } from './vds-icon-button.utils';\n\n@Component({\n  tag: 'vds-icon-button',\n  styleUrl: 'vds-icon-button.scss',\n  shadow: true,\n})\nexport class VdsIconButton {\n  /** Set icon button's size */\n\t@Prop() size: \"large\" | \"medium\" | \"small\" | \"extra-small\" = \"medium\";\n  /** Set icon button's variant */\n\t@Prop() variant: \"primary\" | \"secondary\" | \"tertiary\" = \"primary\";\n  /** Enable icon button's disable state */\n\t@Prop() disabled: boolean = false;\n  /** Sets the icon inside icon button */\n\t@Prop() icon: string;\n  /** Sets the button icon arial-label */\n  @Prop({reflect: true}) setAriaLabel: string;\n  \n  @Element() hostEl: HTMLVdsButtonElement;\n\n  @Listen(\"click\")\n\thandleSubmit(): void {\n\t\tif (this.hostEl.getAttribute(\"type\") === \"submit\") {\n\t\t\tthis.submitForm();\n\t\t}\n\t}\n\n  private submitForm(): void {\n\t\tshadowSubmitForm(this.hostEl);\n\t}\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(`vds-icon-button`, this.disabled ? \"vds-icon-button--disabled\" : \"\")}>\n        <button\n          class={combineClasses(\n            `vds-icon-button__element`,\n            `vds-icon-button__variant--${this.variant}`,\n            `vds-icon-button__size--${this.size}`,\n            this.disabled ? \"vds-icon-button-disabled\" : \"\"\n          )}\n          aria-label={this.setAriaLabel}\n          type=\"button\"\n          disabled={ this.disabled || null}\n          {...cloneAttributes(\n\t\t\t\t\t\tthis.hostEl,\n            \"disabled\",\n            \"class\",\n            \"style\"\n          )}\n        >\n          <vds-icon svg-icon={this.icon} size={ICON_SIZE[this.size]}></vds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"vds-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1 +0,0 @@
-{"file":"vds-icon2.js","mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;AAOG;AACI,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,UAAU,GAAG,IAAI,EAAE,YAAY,GAAG,IAAI,KAAY;AACjG,IAAA,MAAM,IAAI,GAAG,IAAI,MAAM,CAAC,qCAAqC,CAAC;AAC9D,IAAA,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,uCAAuC,CAAC;AACjE,IAAA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,uCAAuC,CAAC;AAClE,IAAA,MAAM,UAAU,GAAG,IAAI,MAAM,CAAC,yCAAyC,CAAC;IACxE,IAAI,OAAO,GAAG,UAAU;IAExB,IAAI,UAAU,EAAE;AACZ,QAAA,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;;IAG5D,IAAI,YAAY,EAAE;AACd,QAAA,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;;AAG/D,IAAA,OAAO,OAAO;AAClB,CAAC;;ACpCD,MAAM,UAAU,GAAG,MAAM,CAAC,u/kDAAu/kD,CAAC;;MCYrglD,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAW2B,QAAA,IAAK,CAAA,KAAA,GAAwB,mBAAmB;AA2F1E;AAnFC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;AACrE,YAAA,IAAI,CAAC,UAAU,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;;;AAIpD,IAAA,WAAW,CAAC,OAAe,EAAA;;QACjC,OAAO,CAAA,EAAA,GAAA,OAAO,KAAP,IAAA,IAAA,OAAO,uBAAP,OAAO,CAAE,IAAI,EAAA,CAAG,UAAU,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAG,KAAK;;AAG3C,IAAA,UAAU,CAAC,OAAe,EAAA;AAChC,QAAA,IAAI;AACF,YAAA,IAAI,GAAG,CAAC,OAAO,CAAC;AAChB,YAAA,OAAO,IAAI;;QACX,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,KAAK;;;AAIR,IAAA,cAAc,CAAC,OAAe,EAAA;QACpC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAACC,UAAY,CAAC;AAEvC,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,OAAO,GAAC,MAAM,CAAC;;AAE5C,IAAA,aAAa,CAAC,OAAe,EAAA;QACnC,OAAO,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAE,QAAQ,CAAC,MAAM,CAAC;;IAG1B,MAAM,aAAa,CAAC,OAAe,EAAA;AACzC,QAAA,OAAO,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;;IAGpC,MAAM,eAAe,CAAC,GAAW,EAAA;AACvC,QAAA,IAAI;AACF,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC;AACjC,YAAA,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;;QAClD,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,IAAI;;;IAGP,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE;YAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAClC,OAAO;AACL,gBAAA,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM;AACnC,gBAAA,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,MAAM;aACrC;;AAEH,QAAA,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE;;IAGlF,aAAa,GAAA;QACnB,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;AAClC,YAAA,OAAO,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;;AAGrC,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;AACvD,YAAA,OAAO,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC;;QAGxC,OAAOA,UAAY,CAAC,CAAA,EAAG,IAAI,CAAC,OAAO,CAAM,IAAA,CAAA,CAAC;;IAG5C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,cAAc,CAAC,WAAW,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,CAAC,EAAA,EAC5D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;AAClE,aACE,CAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,EACrB,KAAK,EAAE,cAAc,CAAC,eAAe,CAAC,EACtC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,CAC3B;;AAGR,iBACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAA,KAAA,CAAO,EAAI,CAAA,CAC3E,CAEE;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","svgs.default"],"sources":["src/utils/icon-generation.utils.ts","src/components/icon/vds-icon.scss?tag=vds-icon&encapsulation=shadow","src/components/icon/vds-icon.tsx"],"sourcesContent":["/**\n * Converts an SVG string to a base64-encoded string.\n *\n * @param {string} svgContent - The SVG content to convert.\n * @returns {string} The base64-encoded SVG string.\n */\nexport const ConvertSvgStringToBase64 = (svgContent: string): string => {\n    const strippedSvgContent = svgContent.replace(/\"/g, \"'\");\n    const base64 = btoa(strippedSvgContent);\n    return `data:image/svg+xml;base64,${base64}`;\n}\n\n/**\n * Generates a VDS SVG string by removing specified attributes.\n *\n * @param {string} svgContent - The original SVG content.\n * @param {boolean} [removeSize=true] - Whether to remove width and height attributes.\n * @param {boolean} [removeColors=true] - Whether to remove fill, background, and color attributes.\n * @returns {string} The modified SVG content.\n */\nexport const GenerateVdsSvg = (svgContent: string, removeSize = true, removeColors = true): string => {\n    const fill = new RegExp(/fill=\"[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*\"/g);\n    const width = new RegExp(/ width=\"[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*\"/g);\n    const height = new RegExp(/height=\"[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*\"/g);\n    const background = new RegExp(/background:[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*/g);\n    let content = svgContent;\n\n    if (removeSize) {\n        content = content.replace(width, \"\").replace(height, \"\");\n    }\n\n    if (removeColors) {\n        content = content.replace(fill, \"\").replace(background, \"\");\n    }\n\n    return content;\n}","@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations.scss';\n\n:host {\n  display: block;\n}\n\n:host-context(.checkbox-icon-checked:not(.checkbox-icon-disabled)) {\n  path:last-child {\n    fill: var(--static-white);\n    color: var(--static-white);\n  }\n}\n\n:host-context(.checkbox-icon-indeterminate:not(.checkbox-icon-disabled)) {\n  path:last-child {\n    fill: var(--static-white);\n    color: var(--static-white);\n  }\n}\n\n:host-context(.radio-button-icon-checked) {\n  path:nth-child(2) {\n    fill: var(--color-icon-white-high);\n    color: var(--color-icon-white-high);\n  }\n}\n\n:host-context(.slider-thumb) {\n  g {\n    path:nth-child(1) {\n      fill: var(--color-icon-white-high);\n      color: var(--color-icon-white-high);\n    }\n    path:nth-child(2) {\n      fill: var(--color-border-low);\n      color: var(--color-border-low);\n    }\n  }\n}\n\n@each $colorName, $_ in map-get($volt-themes, \"light\") {\n  :host(.color-#{$colorName}) {\n    fill: var(--#{$colorName});\n  }\n}\n\n@each $colorName, $palette in $volt-palettes {\n  @each $shadeName, $hex in $palette {\n    :host(.color-static-#{$colorName}-#{$shadeName}) {\n      fill: var(--static-#{$colorName}-#{$shadeName});\n      color: var(--static-#{$colorName}-#{$shadeName});\n    }\n\n    @if ($shadeName == main) {\n      .color-#{$colorName} {\n        fill: $hex;\n      }\n\n      :host(.color-#{$colorName}) {\n        color: $hex;\n      }\n    }\n  }\n}\n\n@each $colorName, $_ in $global {\n  :host(.color-static-#{$colorName}) {\n    fill: var(--static-#{$colorName});\n    color: var(--static-#{$colorName});\n  }\n}","import { Component, Host, h } from '@stencil/core';\nimport { Element, HostElement, Prop } from '@stencil/core/internal';\nimport * as svgs from '../../constants/icon-sprite';\nimport { Colors, IconColors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { GenerateVdsSvg } from '../../utils/icon-generation.utils';\n\n@Component({\n  tag: 'vds-icon',\n  styleUrl: 'vds-icon.scss',\n  shadow: true,\n})\nexport class VdsIcon {\n  /** Set svg icon name to display */\n  @Prop({ mutable: true }) svgIcon: string;\n  /** Set icon size in px or rem, IE: 1.25rem */\n  @Prop({ mutable: true }) size: string;\n  /** Set icon color based in volt palette */\n  @Prop({ mutable: true }) color: IconColors | Colors = 'static-brand-main';\n  /** Set alt text for accesibility */\n  @Prop({ mutable: true }) alt: string;\n\n  @Element() host: HTMLDivElement;  \n  \n  private svgContent: string;\n\n  async componentWillLoad(): Promise<void> {\n    if (this.isValidUrl(this.svgIcon) && this.isValidSvgUrl(this.svgIcon)) {\n      this.svgContent = await this.setSvgContent(this.svgIcon);\n    }\n  }\n\n  private isSvgString(svgIcon: string): boolean {\n    return svgIcon?.trim().startsWith('<svg')?? false;\n  }\n\n  private isValidUrl(svgIcon: string): boolean {\n    try {\n      new URL(svgIcon);\n      return true;\n    } catch (err) {\n      return false;\n    }\n  }\n\n  private isInternalIcon(svgIcon: string): boolean {\n    const icons = Object.keys(svgs.default);\n\n    return icons.some(icon => icon === svgIcon+'.svg');\n  }\n  private isValidSvgUrl(svgIcon: string): boolean {\n    return svgIcon?.endsWith('.svg');\n  }\n\n  private async setSvgContent(svgIcon: string): Promise<string | null> {\n    return await this.fetchSvgContent(svgIcon);\n  }\n\n  private async fetchSvgContent(url: string): Promise<string | null> {\n    try {\n      const response = await fetch(url);\n      return !response.ok ? null : await response.text();\n    } catch (error) {\n      return null;\n    }\n  }\n  private getSize() {\n    if (this.size && this.size.indexOf(',') > -1) {\n      const sizes = this.size.split(',');\n      return {\n        width: sizes[0] ? sizes[0] : '1rem',\n        height: sizes[1] ? sizes[1] : '1rem',\n      };\n    }\n    return { width: this.size ? this.size : '1rem', height: this.size ? this.size : '1rem' };\n  }\n\n  private getSvgContent(): string {\n    if (this.isSvgString(this.svgIcon)) {\n      return GenerateVdsSvg(this.svgIcon);\n    }\n\n    if (this.isValidSvgUrl(this.svgIcon) && this.svgContent) {\n      return GenerateVdsSvg(this.svgContent);\n    }\n\n    return svgs.default[`${this.svgIcon}.svg`];\n  }\n\n  render(): HostElement {\n    return (\n      <Host class={combineClasses('volt-icon', `color-${this.color}`)}>\n        {this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ? \n          (\n            <div\n              part=\"svg-icon\"\n              style={this.getSize()}\n              class={combineClasses('volt-icon-svg')}\n              innerHTML={this.getSvgContent()}>\n            </div>\n          ) \n          : \n          (\n            <img style={this.getSize()} src={this.svgIcon} alt={`${this.alt} icon`} />\n          )\n        }\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/components/vds-key-value-pair.js.map

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

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

@@ -1 +0,0 @@
-{"file":"vds-label.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1 +0,0 @@
-{"file":"vds-label2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,itgCAAitgC,CAAC;;MCQhugC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAE7C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA+BlC;IAzBS,WAAW,GAAA;AACjB,QAAA,QACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,uBAAuB,EAAA,EAAA,GAAA,CAAU;;IAI1C,OAAO,GAAA;QACb,QACE,CAAA,CAAA,UAAA,EAAA,EAAA,UAAA,EAAoB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAA,CAAY;;IAIpF,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EAAA,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA;AACqB,uCAAA,EAAA,IAAI,CAAC,IAAI;uBAC3B,IAAI,CAAC,QAAQ,GAAG,uBAAuB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC3D,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,OAAO,EAAA,EACjB,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAC5E,CACJ,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/label/vds-label.scss?tag=vds-label&encapsulation=shadow","src/components/label/vds-label.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: block;\n  .volt__label {\n    color: var(--color-text-high);\n\n    label {\n      display: flex;\n    }\n\n    &.volt__label--size-small {\n      @include font-style(body, small);\n    }\n\n    &.volt__label--size-medium {\n      @include font-style(body, medium);\n    }\n    \n    &.volt__label--size-large {\n      @include font-style(body, large);\n    }\n\n    &.volt__label--disabled {\n      color: var(--color-text-disabled);\n      .volt__label--required {\n        color: var(--color-text-disabled);\n      }  \n    }\n\n    .volt__label--required {\n      width: 0.3125rem;\n      align-self: stretch;\n      color: var(--color-text-danger-medium);\n      @include font-style(title, 2x-small);\n    }\n  }\n}\n\n:host-context(.vds-label--disabled) {\n  pointer-events: none;\n}","import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-label',\n  styleUrl: 'vds-label.scss',\n  shadow: true,\n})\nexport class VdsLabel {\n  /** Sets the size of the label */\n  @Prop() size: \"small\" | \"large\" | \"medium\" = \"medium\";\n  /** Sets label in disabled state */\n  @Prop() disabled: boolean = false;\n  /** Sets the label as required element adding * at the end */\n  @Prop() required: boolean = false\n  /** Sets the label text */\n  @Prop() labelValue!: string;\n  /** Displays icon at the end of the text */\n  @Prop() icon: string;\n\n  private getRequired(): HTMLStencilElement {\n    return (\n      <span class={\"volt__label--required\"}>*</span>\n    )\n  }\n\n  private getIcon(): HTMLStencilElement {\n    return (\n      <vds-icon svg-icon={this.icon} color=\"static-brand-main\" size=\"2rem\"></vds-icon>\n    )\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-label--disabled\" : \"\"}>\n        <div class={`volt__label\n                     volt__label--size-${this.size}\n                     ${this.disabled ? \"volt__label--disabled\" : \"\"}`}>\n          <label part={\"label\"}>\n            {this.labelValue}{this.required && this.getRequired()}{this.icon && this.getIcon()}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"vds-link.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,8jmCAA8jmC,CAAC;;MCS5kmCA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASU,QAAA,IAAY,CAAA,YAAA,GAAqB,OAAO;;AAExC,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;;AAE1B,QAAA,IAAG,CAAA,GAAA,GAAW,GAAG;;AAEjB,QAAA,IAAM,CAAA,MAAA,GAA4C,OAAO;;AAEzD,QAAA,IAAG,CAAA,GAAA,GAAW,IAAI;;AAElB,QAAA,IAAI,CAAA,IAAA,GAA8D,QAAQ;AAGlF;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuC,SAAS;AAgEhE;AA7DC;;;AAGG;IACH,OAAO,GAAA;QACL,IAAI,IAAI,GAAG,QAAQ;AACnB,QAAA,QAAO,IAAI,CAAC,IAAI;AACd,YAAA,KAAK,UAAU;gBACb,IAAI,GAAG,SAAS;gBAChB;AACF,YAAA,KAAK,aAAa;gBAChB,IAAI,GAAG,MAAM;gBACb;AACF,YAAA,KAAK,OAAO;gBACV,IAAI,GAAG,SAAS;gBAChB;AACF,YAAA,KAAK,QAAQ;gBACX,IAAI,GAAG,QAAQ;gBACf;AACF,YAAA,KAAK,OAAO;gBACV,IAAI,GAAG,SAAS;gBAChB;;AAGJ,QAAA,OAAO,CAAA,CAAA,UAAA,EAAA,EACL,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAC,oBAAoB,EAAA,CAAY;;IAG1C,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,cAAc,CACnB,CAA8B,2BAAA,EAAA,IAAI,CAAC,OAAO,CAAE,CAAA,EAC5C,CAA2B,wBAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAEvC,EACD,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EAAA,EAEb,CACA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CAAC,CAAA,mBAAA,CAAqB,EACxC,CAAA,wBAAA,EAA2B,IAAI,CAAC,YAAY,CAAA,CAAE,CAChD,EAAA,EAEE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,OAAO,EAAE,EACvC,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACnB,CAAA,kBAAA,EAAqB,IAAI,CAAC,SAAS,GAAG,qBAAqB,GAAG,EAAE,CAAA,CAAE,CACnE,EAAA,EAEA,IAAI,CAAC,KAAK,CACN,CACF,CACL,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsLink","__stencil_proxyCustomElement"],"sources":["src/components/link/vds-link.scss?tag=vds-link&encapsulation=shadow","src/components/link/vds-link.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: inline-block;\n  .vds-link{\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: var(--spacing-00);\n    gap: var(--spacing-00);\n    border-radius: var(--radius-medium);\n    text-decoration: none;\n    vertical-align: middle;\n    &:focus-visible {\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n    .vds-link--container{\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      &.vds-link--icon-position-left {\n      flex-direction: row;\n      }\n      &.vds-link--icon-position-right {\n        flex-direction: row-reverse;\n      }\n    }\n    .vds-link--content {\n      color: var(--color-link-default);\n    }\n    vds-icon {\n      color: var(--color-icon-brand-default);\n      fill: var(--color-icon-brand-default);\n    }\n\n    &.vds-link--variant-primary {\n      .vds-link--content {\n        color: var(--color-link-default);\n      }\n      vds-icon {\n        color: var(--color-icon-brand-default);\n        fill: var(--color-icon-brand-default);\n      }\n      &:hover {\n        background-color: var(--color-interaction-brand-lowest);\n        .vds-link--content {\n          color: var(--color-icon-brand-hover);\n        }\n        vds-icon {\n          fill: var(--color-icon-brand-hover);\n          color: var(--color-icon-brand-hover);\n        }\n      }\n      &:active {\n        .vds-link--content {\n          color: var(--color-text-information-high);\n        }\n        vds-icon {\n          fill: var(--color-icon-information);\n          color: var(--color-icon-information);\n        }\n      }\n    }\n\n    &.vds-link--variant-secondary {\n      .vds-link--content {\n        color: var(--color-text-medium);\n      }\n      vds-icon {\n        color: var(--color-icon-medium);\n        fill: var(--color-icon-medium);\n      }\n      &:hover {\n        background-color: var(--color-interaction-black-lowest);\n        .vds-link--content {\n          color: var(--color-text-medium);\n        }\n        vds-icon {\n          fill: var(--color-icon-medium);\n          color: var(--color-icon-medium);\n        }\n      }\n      &:active {\n        .vds-link--content {\n          color: var(--color-text-information-high);\n        }\n        vds-icon {\n          fill: var(--color-icon-information);\n          color: var(--color-icon-information);\n        }\n      }\n    }   \n  }\n\n  .vds-link--content {\n    display: flex;\n    padding: var(--spacing-02);\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    text-align: center;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-style: normal;    \n    text-decoration-line: none;\n    vertical-align: middle;    \n  }\n  vds-icon {\n    display: inline-flex;\n    padding: var(--spacing-02);\n    vertical-align: middle;\n  }\n\n  .vds-link--variant-footer {\n    @include font-style(title, '2x-small');\n    text-decoration-line: none;\n    outline: none;\n\n    &:hover {\n      background-color: var(--color-interaction-black-lowest);\n    }\n    .vds-link--content {\n      @include font-style(title, 2x-small);\n      color: var(--color-text-medium);\n    }\n\n    vds-icon {\n      color: var(--color-icon-medium);\n      fill: var(--color-icon-medium);\n    }\n\n  }\n  .vds-link--underline {\n    text-decoration: underline;\n  }\n  .vds-link--size-2x-small {\n    @include font-style(title, 2x-small);\n  }\n  .vds-link--size-extra-small {\n    @include font-style(title, extra-small);\n  }\n  .vds-link--size-small{\n    @include font-style(title, small);\n  }\n  .vds-link--size-medium {\n    @include font-style(title, medium);\n  }\n  .vds-link--size-large {\n    @include font-style(title, large);\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-link\",\n  styleUrl: \"vds-link.scss\",\n  shadow: true,\n})\nexport class VdsLink {\n  /** Sets the value for the label text */\n  @Prop() value: string;\n  /** Sets icon position relative to the label text */\n  @Prop() iconPosition: \"right\" | \"left\" = \"right\";\n  /** Enable / Disable underline text decoration */\n  @Prop() underline: boolean = false;\n  /** Sets url link for the internal href */\n  @Prop() url: string = \"#\";\n  /** Sets href target */\n  @Prop() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\";\n  /** Sets the link rel value */\n  @Prop() rel: string = null;\n  /** Set the link size */\n  @Prop() size: \"large\" | \"medium\" | \"small\" | \"extra-small\" | \"2x-small\" = \"medium\";\n  /** Sets the informative icon in the vds-link */\n  @Prop() informativeIcon: string;\n  /** Sets the link variant - footer variant is the same as secondary.\n   * @tobedeprecated footer variant will be deprecated in the future.\n   */\n  @Prop() variant: \"primary\" | \"secondary\" | \"footer\" = \"primary\";\n\n\n  /** Sets the informative icon in the vds-link\n   * \n   * @returns HTMLStencilElement\n   */\n  getIcon(): HTMLStencilElement {\n    let size = \"1.5rem\";\n    switch(this.size) {\n      case \"2x-small\":\n        size = \"0.75rem\";\n        break;\n      case \"extra-small\":\n        size = \"1rem\";\n        break;\n      case \"small\":\n        size = \"1.25rem\";\n        break;\n      case \"medium\":\n        size = \"1.5rem\";\n        break;\n      case \"large\":\n        size = \"1.75rem\";\n        break;\n    }\n\n    return <vds-icon\n      svgIcon={this.informativeIcon}\n      size={this.variant === \"footer\" ? \"1rem\" : size}\n      color=\"color-link-default\"></vds-icon>;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <a\n          class={combineClasses(\n            `vds-link vds-link--variant-${this.variant}`,\n            `vds-link vds-link--size-${this.size}`,\n           \n          )}\n          href={this.url}\n          target={this.target}\n          rel={this.rel}\n        >\n          <span\n          class={combineClasses(`vds-link--container`,\n             `vds-link--icon-position-${this.iconPosition}`\n          )}\n          >\n            {this.informativeIcon && this.getIcon()}\n            <span\n              class={combineClasses(\n                `vds-link--content ${this.underline ? \"vds-link--underline\" : \"\"}`\n              )}\n            >\n              {this.value}\n            </span>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-menu-group-header.js.map

@@ -1 +0,0 @@
-{"file":"vds-menu-group-header.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,imgCAAimgC,CAAC;;MCQ1ngCA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAA,WAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAoB,QAAQ;AASzC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CACnC;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsMenuGroupHeader","__stencil_proxyCustomElement"],"sources":["src/components/menu-group-header/vds-menu-group-header.scss?tag=vds-menu-group-header&encapsulation=shadow","src/components/menu-group-header/vds-menu-group-header.tsx"],"sourcesContent":["@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n@import '../base-group-header/base-group-header.scss';\n\n:host {\n  display: block;\n  width: 100%;\n}","import { Component, Host, h, Prop } from '@stencil/core';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n  tag: 'vds-menu-group-header',\n  styleUrl: 'vds-menu-group-header.scss',\n  shadow: true,\n})\nexport class VdsMenuGroupHeader {\n  /** Size of the group header */\n  @Prop() size: GroupHeaderSize = 'medium';\n\n  render() {\n    return (\n      <Host>\n        {generateGroupHeaderContainer(this.size)}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"vds-menu-item.js","mappings":"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","names":["VdsMenuItem","__stencil_proxyCustomElement"],"sources":["src/components/menu-item/vds-menu-item.scss?tag=vds-menu-item&encapsulation=shadow","src/components/menu-item/vds-menu-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  width: 100%;\n  .vds-menu-item {\n    @include baseItem();\n    &.vds-menu-item--size-medium {\n      @include baseItemSizeMedium();\n      .vds-menu-item__content {\n        @include baseItemContent(medium);\n      }\n    }\n    &.vds-menu-item--size-large {\n      @include baseItemSizeLarge();\n      .vds-menu-item__content {\n        @include baseItemContent(large);\n      }\n    }\n    &.vds-menu-item--active {\n      @include baseItemActive();\n      &.vds-menu-item--danger  {\n        @include baseItemBackgroundDanger();\n      }\n    }\n    &.vds-menu-item--danger {\n      @include baseItemDanger();\n    }\n    &.vds-menu-item--disabled {\n      @include baseItemDisabled();\n      &.vds-menu-item--danger {\n        @include baseItemDisabled();\n      }\n    }\n  }\n}\n\n:host(.vds-menu-item--disabled) {\n  pointer-events: none;\n}\n\n:host-context(.breadcrumb) {\n  .vds-menu-item {\n    padding: 0;\n    ::slotted(a) {\n      color: var(--color-text-high);\n      text-decoration: none;\n      background: none;\n      width: 100%;\n      border: none;\n      outline: none;\n      box-sizing: border-box;\n    }\n\n    &.vds-menu-item--size-medium {\n      ::slotted(a) {\n        @include baseItemSizeMedium();\n      }\n    }\n    &.vds-menu-item--size-large {\n      ::slotted(a) {\n        @include baseItemSizeLarge();\n      }\n    }\n    &.vds-menu-item--active {\n      ::slotted(a) {\n        @include baseItemActive();\n      }\n      &.vds-menu-item--danger  {\n        ::slotted(a) {\n          @include baseItemBackgroundDanger();\n        }\n      }\n    }\n    &.vds-menu-item--danger {\n      ::slotted(a) {\n        @include baseItemDanger();\n      }\n    }\n    &.vds-menu-item--disabled {\n      ::slotted(a) {\n        @include baseItemDisabled();\n      }\n    }\n  }\n}\n\n","import { Component, Event, EventEmitter, Host, Prop, h, Element } from \"@stencil/core\";\nimport { HTMLStencilElement, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { handleRefClick } from \"../../utils/utils\";\nimport { generateCheckbox, generateCheckmarkIconButton, generateChildrenIconButton, generateInformativeIcon, generateLabel } from \"../base-item/base-item\";\n\nexport interface MenuItemClickedEvent {\n  value: string;\n  event: MouseEvent;\n}\n\n@Component({\n  tag: \"vds-menu-item\",\n  styleUrl: \"vds-menu-item.scss\",\n  shadow: true,\n})\nexport class VdsMenuItem {\n /** Puts the VdsMenuItem in disabled state */\n  @Prop({ mutable: true }) disabled: 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  /** Shows arrow when there are children */\n  @Prop({ mutable: true }) hasChildren: boolean = false;\n  /** Defines the element as a link */\n  @Prop({ mutable: true }) linkHref: string = null;\n  /** Sets the link target value */\n  @Prop({ mutable: true }) linkTarget: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\";\n  /** Sets the link rel value */\n  @Prop({ mutable: true }) linkRel: string = null;\n  /** Define text value */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Define aria-label */\n  @Prop({ mutable: true, reflect: true }) setAriaLabel: string;\n  /** Set size of menu item */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Shows checkmark */\n  @Prop({ mutable: true }) hasCheckmark: boolean = false;  \n  /** Set state of checkmark */\n  @Prop({ mutable: true, reflect: true }) isSelected: boolean = false;\n  /** When has-checkmark is true, sets the checks element as checkmark or checkbox.  */\n  @Prop() checkmarkVariant: \"checkbox\" |\"checkmark\" = \"checkmark\";\n  /** When has-checkmark is true, sets the checks element at the beginning or end.  */\n  @Prop() checkmarkAlignment: \"start\" |\"end\" = \"start\";\n  /** Sets the menu item to danger state.  */\n  @Prop({ mutable: true, reflect: true }) danger: boolean = false;\n\n  /** Emits event when item gets clicked */\n  @Event() clicked: EventEmitter<MenuItemClickedEvent>;\n  /** Emits event when item is selected */\n  @Event() selected: EventEmitter<MouseEvent>;\n  /** Emits event when item is deselected */\n  @Event() deselected: EventEmitter<MouseEvent>;\n \n  @Element() hostEl: HTMLElement; \n  \n  @Watch(\"isSelected\")\n  updateItemState() {\n    this.isActive = this.isSelected; \n  }\n\n  private handleClick(evt: MouseEvent): void {\n    const parentMenu = this.hostEl.closest(\"vds-menu\");\n    const isMenuTrigger = this.hostEl.getAttribute(\"slot\") === \"menu-trigger\";\n    if (parentMenu && isMenuTrigger) {\n      parentMenu.open();\n      evt.stopPropagation();\n    } else {\n      handleRefClick(this.linkHref, this.linkTarget, this.linkRel);\n      this.clicked.emit({ value: this.value, event: evt });\n      this.handleSelected(evt);\n    }\n  }\n\n  private handleSelected(evt: MouseEvent):void{\n    if (this.hasCheckmark) {\n      this.isSelected = !this.isSelected;\n    }\n    if (this.isSelected) this.selected.emit(evt);\n    else this.deselected.emit(evt);\n  }\n\n  private generateCheckmarkIconButton(){\n    return generateCheckmarkIconButton(this.isSelected, this.size, this.disabled, this.isActive, this.danger);\n  }\n  private generateInformativeIcon(){\n    return generateInformativeIcon(this.icon, this.value, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateCheckbox() {\n    return generateCheckbox(this.isSelected, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateLabel(){\n    return generateLabel(this.value, this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private generateChildrenIconButton(){\n    return generateChildrenIconButton(this.size, this.disabled, this.isActive, this.danger);\n  }\n\n  private setAriaLabelText(){\n    return this.setAriaLabel ? this.setAriaLabel : this.value;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-menu-item--disabled\" : \"\"}>\n        <button\n          type=\"button\"\n          tabindex=\"0\"  \n          disabled={this.disabled}\n          title={this.setAriaLabelText()}\n          aria-label={this.setAriaLabelText()}\n          onClick={(evt: MouseEvent) => {\n            if (this.disabled) {\n              evt.stopPropagation();\n              evt.preventDefault();\n            } else {\n              this.handleClick(evt);\n            }\n          }}\n          class={\n            combineClasses(\n              \"vds-menu-item\",\n              `vds-menu-item--size-${this.size}`,\n              this.disabled ? \"vds-menu-item--disabled\" : \"\",\n              this.isActive || this.isSelected ? \"vds-menu-item--active\" : \"\",\n              this.danger ? \"vds-menu-item--danger\" : \"\",\n              `vds-menu-item__alignment-${this.checkmarkAlignment}`\n          )}\n        >\n          <div class=\"vds-menu-item__content\">\n            {this.checkmarkAlignment === \"start\" && this.hasCheckmark ? this.checkmarkVariant === \"checkmark\" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null}\n            {this.icon && this.generateInformativeIcon()}\n            {this.value ? this.generateLabel() : <slot></slot>}\n            {this.checkmarkAlignment === \"end\" && this.hasCheckmark ? this.checkmarkVariant === \"checkmark\" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null}\n            {this.hasChildren && this.generateChildrenIconButton()} \n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-menu-list.js.map

@@ -1 +0,0 @@
-{"file":"vds-menu-list.js","mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,+t/BAA+t/B,CAAC;;MCMjv/BA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;;;;;;;;IACtB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsMenuList","__stencil_proxyCustomElement"],"sources":["src/components/menu-list/vds-menu-list.scss?tag=vds-menu-list&encapsulation=shadow","src/components/menu-list/vds-menu-list.tsx"],"sourcesContent":[":host {\n  display: block;\n  .vds__menu-list--container{\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    background:  var(--surface-medium);\n    border-radius: var(--radius-medium);\n    width: 100%;\n    overflow-y: auto;\n    max-height: calc(var(--menu-max-height, fit-content) - var(--spacing-02) * 2);\n    &::-webkit-scrollbar {\n      background-color:  var(--surface-medium);\n      width: 0.375rem;\n    }\n    &::-webkit-scrollbar-thumb {\n      background-color: var(--color-background-neutral-press);\n      border-radius: var(--radius-pill)\n    } \n  }\n}\n","import { Component, Host, h } from '@stencil/core';\n@Component({\n  tag: 'vds-menu-list',\n  styleUrl: 'vds-menu-list.scss',\n  shadow: true,\n})\nexport class VdsMenuList {\n  render() {\n    return (\n      <Host>\n        <div class=\"vds__menu-list--container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"vds-menu.js","mappings":"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","names":["VdsMenu","__stencil_proxyCustomElement"],"sources":["src/components/menu/vds-menu.scss?tag=vds-menu&encapsulation=shadow","src/components/menu/vds-menu.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: fit-content;\n  height: fit-content;\n\n  .vds__menu--container {\n    display: none;\n    position: absolute;\n    max-width: var(--menu-max-width, unset) !important;\n    height: fit-content;\n    max-height: var(--menu-max-height, unset) !important;\n    flex-direction: column;\n    align-self: stretch;\n    background-color: var(--surface-medium);\n    border-radius: var(--radius-medium);\n    border: 0px solid var(--color-border-low);\n    z-index: var(--elevation-layer-2);\n    box-shadow: var(--elevation-shadow-2);\n    box-sizing: border-box;\n    border: 0.0625rem solid var(--color-border-lowest);\n    &.has-scroll {\n      padding-right: var(--spacing-01);\n    }\n  }\n  .vds__menu--submenu {\n    &-right,\n    &-left,\n    &-top,\n    &-bottom {\n      top: auto !important;\n      white-space: nowrap;\n    }\n    &-right {\n      left: 100% !important;\n    }\n    &-left {\n      left: auto !important;\n      transform: translateX(-100%);\n    }\n    &-top,\n    &-bottom {\n      left: auto !important;\n    }\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 { combineClasses } from \"../../utils/combine-classes\";\nimport { queryElementFromShadowRoot } from \"../../utils/node-utils\";\n\n@Component({\n  tag: \"vds-menu\",\n  styleUrl: \"vds-menu.scss\",\n  shadow: true,\n})\nexport class VdsMenu {\n\n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the menu will be opened */\n  @Prop({ mutable: true }) position: \"top\" | \"bottom\" | \"right\" | \"left\" = \"bottom\";\n  /** Sets the maximum width of the menu\"s content */\n  @Prop({ mutable: true }) maxWidth: string;\n  /** Sets the maximum height of the menu\"s content */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({ mutable: true }) event: \"hover\" | \"click\" = \"click\";\n  /** Toggles 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  /** Set backdrop when show the menu */\n  @Prop({ mutable: true }) backdrop: boolean = false;\n\n  @State() menuOpened: boolean = false;\n  /** Emits event when menu gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when menu gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private actionElementRef: HTMLElement;\n  private menuElementRef: HTMLElement;\n  private floatingCleanUp: () => void;\n\n  private isSubmenu: boolean = false;\n  \n  constructor() {\n    this.floatingCleanUp = () => { };\n  }\n\n  @Watch(\"menuOpened\")\n  async emitValue(): Promise<void> {\n    if (this.menuOpened) {\n      this.opened.emit();\n      this.menuElementRef.style.display = \"inline-flex\";\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\n    } else {\n      this.closeNestedMenus();\n      this.closed.emit();\n      this.menuElementRef.style.display = \"none\";\n      this.floatingCleanUp();\n    }\n  }\n\n  /* Close the menu when click outside */\n  @Listen(\"click\", { target: \"window\" })\n  handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside && !this.backdrop) {\n      this.menuOpened = false;\n    }\n  }\n  \n  handleHoverOut(event: Event): void {\n    if (this.event === \"hover\") {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.close();\n      }\n    }\n  }\n  \n  /* Close all nested menus recursively */\n  private closeNestedMenus(): void {\n    const menuContent = this.menuElementRef.querySelector('slot[name=\"menu-content\"]') as HTMLSlotElement;\n    if (menuContent) {\n      const elements = Array.from(menuContent.children);\n      for (const element of elements) {\n        const nestedMenu = element.querySelector('vds-menu');\n        if (nestedMenu) {\n          nestedMenu.close();\n        }\n      }\n    }\n  }\n  \n  /* Open the menu with click on the trigger element  */\n  async handleClick(evt: Event): Promise<void> {\n    if (this.event === \"click\") {\n      const clickedElement = evt.target as HTMLElement;\n      if (clickedElement && !this.menuOpened) {\n        this.menuOpened = true;\n      }\n    }\n  }\n\n  /* Listen when Menu Item element is clicked to close Menu window */\n  @Listen(\"clicked\")\n  handleMenuItemClicked(): void {\n    this.close();\n  }\n\n  /* Open the menu from other element  */\n  @Method()\n  public async open(): Promise<void> {\n    this.menuOpened = true;\n  }\n\n  /* Close the menu from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.closeNestedMenus();\n    this.menuOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector(\".vds__menu--trigger\") 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.menuOpened = true;\n      }\n    }\n  }\n\n  private setMaxWidthAndHeight() {\n    return { \"--menu-max-width\": this.maxWidth, \"--menu-max-height\": this.maxHeight }\n  }\n\n  componentWillLoad() {\n    const triggerItem = Array.from(this.hostEl.children).find(\n      (child) => child.matches('vds-menu-item[slot=\"menu-trigger\"]')\n    );\n    if (triggerItem) {\n      this.isSubmenu = true;\n      this.backdrop = false;\n      this.autoPosition = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--trigger\");\n    this.menuElementRef = queryElementFromShadowRoot(this.hostEl, \".vds__menu--container\");\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.menuElementRef.addEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  componentDidRender() {\n    updateFloatingBoxPosition(this.actionElementRef, this.menuElementRef, null, this.position, this.autoPosition);\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.menuElementRef.removeEventListener(\"mouseleave\", this.handleHoverOut.bind(this));\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        {this.backdrop && this.menuOpened ? <div class=\"vds__menu--backdrop\" onClick={() => this.close()}></div> : null}\n        <div class=\"vds__menu--trigger\"\n          onClick={(evt: MouseEvent) => {\n            this.handleClick(evt);\n          }}\n          ref={(triggerEl) => { if (triggerEl) this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"menu-trigger\"></slot>\n        </div>\n        <div\n          class={combineClasses(\n            \"vds__menu--container\",\n            this.maxHeight ? \"has-scroll\" : \"\",\n            this.isSubmenu ? `vds__menu--submenu-${this.position}` : \"\"\n          )}\n          ref={(menuEl) => { if (menuEl) this.menuElementRef = menuEl; }}\n        >\n          <slot name=\"menu-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

package/dist/components/vds-progress-circular.js.map

@@ -1 +0,0 @@
-{"file":"vds-progress-circular.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/vds-progress-circular2.js.map

@@ -1 +0,0 @@
-{"file":"vds-progress-circular2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/progress-circular/vds-progress-circular.scss?tag=vds-progress-circular&encapsulation=shadow","src/components/progress-circular/vds-progress-circular.tsx"],"sourcesContent":[":host {\n  display: block;\n  height: fit-content;\n  width: fit-content;\n  z-index: var(--elevation-layer-5);\n  --progress-circular-background-track: var(--color-background-information-lowest-default);\n  --progress-circular-background-track-fill: var(--color-background-information-default);\n  .vds-progress-circular__container {\n    display: flex;\n    position: relative;\n    justify-content: center;\n    align-items: center;\n    --size: 3.5rem;\n    height: var(--size);\n    width: var(--size);\n\n    .vds-progress-circular__track {\n      position: absolute;\n      stroke-width: 4;\n    }\n\n    .vds-progress-circular__track-fill {\n      position: absolute;\n      stroke-width: 4;\n      transform: rotate(-90deg);\n      transform-origin: center;\n    }\n\n    &.vds-progress-circular__container--default-colors {\n      .vds-progress-circular__track {\n        stroke: var(--progress-circular-background-track);\n        &.vds-progress-circular__track--error {\n          --progress-circular-background-track: var(--color-background-information-lowest-default);\n        }\n        &.vds-progress-circular__track--success {\n          --progress-circular-background-track: var(--color-background-information-lowest-default);\n        }\n      }\n      .vds-progress-circular__track-fill {\n        stroke: var(--progress-circular-background-track-fill);\n        &.vds-progress-circular__track-fill--error {\n          --progress-circular-background-track-fill: var(--color-background-danger-default);\n        }\n        &.vds-progress-circular__track-fill--success {\n          --progress-circular-background-track-fill: var(--color-background-healthy-default);\n        }\n      }\n    }\n    &.vds-progress-circular__container--custom-colors {\n      .vds-progress-circular__track {\n        stroke: var(--progress-circular-background-track);\n      }\n      .vds-progress-circular__track-fill {\n        stroke: var(--progress-circular-background-track-fill);\n      }\n    }\n  }\n\n  @keyframes rotate {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}\n","import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-progress-circular',\n  styleUrl: 'vds-progress-circular.scss',\n  shadow: true,\n})\nexport class VdsProgressCircular {\n  /** Sets the percentage filled value from 0 to 100 */\n  @Prop() value: number;\n  /** \n   * Defines the color based on the status:\n   * error -> color-background-critical-default,\n   * success -> color-background-general-healthy-default,\n   * default -> color-background-brand-default\n   */\n  @Prop() status: 'error' | 'success' | 'default' = 'default';\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() duration: number = 500;\n  /** Sets the aria label */\n  @Prop() setAriaLabel: string;\n  /** \n   * Sets the progress indicator color from the Volt palette:\n   * backgroundProgress - ThemeColors,\n   * backgroundTrack - ThemeColors\n   */\n  @Prop() colors: { [key: string]: string } | string;\n  /** \n   * Set the size scale of the component based on 1 === 52px (3.5rem).\n   * Common values:\n   * - 0.25 (extra small): 13px\n   * - 0.5 (small): 26px\n   * - 1 (medium): 52px\n   * - 1.5 (large): 78px\n   * Minimum scale is 0.25\n   */\n  @Prop() scale: number = 1;\n\n  /**\n   * State variable to hold the progress value.\n   */\n  @State() progress: number;\n\n  private customColors = false;\n\n  /**\n   * Calculates and returns the styling for the progress circle based on the current value.\n   * This is used to create the stroke-dasharray and stroke-dashoffset for the SVG circle,\n   * which visually represents the progress percentage.\n   *\n   * @private\n   * @returns {Object} An object containing the CSS styles for the SVG circle's stroke.\n   */\n  private setProgress(): { strokeDasharray: string; strokeDashoffset: string } {\n    this.progress = this.value < 0 ? 0 : this.value > 100 ? 100 : this.value;\n    const radius = 24;\n    const circumference = 2 * Math.PI * radius;\n\n    const strokeDashoffset = circumference * (1 - this.progress / 100);\n\n    return {\n      strokeDasharray: `${circumference}`,\n      strokeDashoffset: `${strokeDashoffset}`,\n    };\n  }\n\n  /**\n   * Returns the animation for the indeterminate slider.\n   * Using the duration prop we return an animation effect in ms.\n   * Going from top to bottom using the value as the progress.\n   *\n   * @private\n   * @returns { animation: string }\n   */\n  @Watch('duration')\n  private setDurationAnimation(): { animation: string } | {} {\n    return this.duration > 0 ? { animation: `rotate ${this.duration}ms linear infinite` } : {};\n  }\n\n  /**\n   * Ensures that the scale is clamped to a minimum value of 0.25.\n   *\n   * @private\n   * @param {number} scale - The new scale value.\n   */\n  @Watch('scale')\n  private setScale(scale: number): void {\n    this.scale = Math.max(0.25, scale);\n  }\n\n  /**\n   * Sets custom colors for the progress bar.\n   *\n   * @private\n   * @returns {Object} An object containing the CSS styles for the custom colors.\n   */\n  private setCustomColors(): { [key: string]: string } {\n    const colors = typeof this.colors === 'string' ? JSON.parse(this.colors) : this.colors;\n    const style = {\n      ...(colors?.backgroundTrack && { '--progress-circular-background-track': `var(--${colors.backgroundTrack})` }),\n      ...(colors?.backgroundProgress && { '--progress-circular-background-track-fill': `var(--${colors.backgroundProgress})` }),\n    };\n    this.activateCustomColors(colors);\n\n    return style;\n  }\n\n  /**\n   * Activates custom colors.\n   *\n   * @private\n   * @param {Object} colors - The colors object.\n   * @returns {void}\n   */\n  private activateCustomColors(colors: { [key: string]: string }): void {\n    this.customColors = !!colors && (!!colors['backgroundTrack'] || !!colors['backgroundProgress']);\n  }\n\n  componentWillLoad() {\n    this.setScale(this.scale);\n  }\n\n  render() {\n    return (\n      <Host style={this.setCustomColors()}>\n        <div\n          class={combineClasses(\n            'vds-progress-circular__container',\n            this.customColors ? 'vds-progress-circular__container--custom-colors' : 'vds-progress-circular__container--default-colors',\n          )}\n          style={{ '--size': `calc(3.5rem * ${this.scale})` }}\n        >\n          <svg\n            class={combineClasses(\n              'vds-progress-circular__track',\n              `vds-progress-circular__track--${this.status}`,\n            )}\n            viewBox=\"0 0 52 52\"\n          >\n            <circle cx=\"26\" cy=\"26\" r=\"24\" fill=\"none\" />\n          </svg>\n          <svg\n            class={combineClasses(\n              'vds-progress-circular__track-fill',\n              `vds-progress-circular__track-fill--${this.status}`,\n            )}\n            style={this.setDurationAnimation()}\n            viewBox=\"0 0 52 52\"\n          >\n            <circle cx=\"26\" cy=\"26\" r=\"24\" fill=\"none\" style={this.setProgress()} />\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-progress-linear.js.map

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

package/dist/components/vds-radio-button.js.map

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

package/dist/components/vds-segmented-button.js.map

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

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

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

package/dist/components/vds-sidenav-item-app.js.map

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

package/dist/components/vds-sidenav-item-button.js.map

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

package/dist/components/vds-sidenav-item-category.js.map

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

package/dist/components/vds-sidenav-item-input.js.map

@@ -1 +0,0 @@
-{"file":"vds-sidenav-item-input.js","mappings":"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","names":["VdsSidenavItemInput","__stencil_proxyCustomElement"],"sources":["src/components/sidenav-item-input/vds-sidenav-item-input.scss?tag=vds-sidenav-item-input&encapsulation=shadow","src/components/sidenav-item-input/vds-sidenav-item-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --vds-sidenav-item-input-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);\n  --vds-sidenav-item-input-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);\n\n  .vds__sidenav__item__input--collapse {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: var(--spacing-03) var(--spacing-04);\n    height: var(--spacing-10);\n    border-radius: var(--spacing-02);\n    width: var(--vds-sidenav-item-input-collapsed-width);\n    cursor: pointer;\n    &:hover {\n      background: var(--color-interaction-black-lowest);\n    }\n    &:focus {\n      border-color: var(--color-border-focus-2);        \n    }\n  }\n\n  .vds-sidenav-item-input {\n    width: var(--vds-sidenav-item-input-expanded-width);\n  }\n}\n\n:host-context(.vds__sidenav-item-input--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { AttachInternals, HTMLStencilElement, State, Watch } from '@stencil/core/internal';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { VdsBasicInputCustomEvent } from '../../components';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n  tag: 'vds-sidenav-item-input',\n  styleUrl: 'vds-sidenav-item-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsSidenavItemInput {\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop() expanded: boolean = true;\n  /** Sets the input's value. */\n  @Prop({ mutable: true, reflect: true }) value: string = \"\";\n  /** Sets the input's placeholder. */\n  @Prop({ mutable: true, reflect: true }) placeholder: string;\n  /** Sets the input in disabled state. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean;\n  /** Sets the input in readonly state. */\n  @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n  /** Sets the input in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Allows user to define a information icon inside the input at its left . */\n  @Prop() informativeIcon: string;\n  /** Allows user to define a search icon inside the input at its right (zoom by default) . */\n  @Prop() actionIcon: string = \"zoom\";\n  /** Sets character formatting for user input. Useful for adding a mask to the input. */\n  @Prop({ mutable: true }) formatter?: Function;\n\n  /** Emits an event when the user change the value */\n  @Event() changeInput: EventEmitter<string>;\n  /** Emits an event when the user clicks on input's icon */\n  @Event() iconClick: EventEmitter<MouseEvent>;\n  /** Emits an event when the user clicks on icon when expanded is false */\n  @Event() collapseIconClick: EventEmitter<MouseEvent>;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n  \n  @State() inputIcon: string = this.actionIcon;\n\n  private inputEl: HTMLVdsBasicInputElement;\n\n  componentDidLoad(): void {\n    this.setFormValue();\n  }\n\n  @Watch(\"value\")\n  setFormValue(): void {\n    emitInputEvent(this.hostEl, this.value);\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /**\n\t * Sets focus on the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return this.inputEl.setFocus();\n\t}\n\n  /**\n\t * Gets value prop from the vds-input element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n    return this.inputEl.getValue();\n\t}\n\n  /**\n\t * Clears value prop from the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tclear(): Promise<void> {\n    this.value = \"\";\n    this.inputEl.clear();\n    this.inputIcon = this.actionIcon;\n    return Promise.resolve();\n\t}\n\n  /**\n\t * Handles change input event from vds-basic-input\n   * Emits changeInput event.\n   * Sets icon to close when value is not blank otherwise zoom.\n\t *\n   * @params evt - VdsBasicInputCustomEvent\n\t * @returns void\n\t */\n  private handleChangeInput(evt: VdsBasicInputCustomEvent<string>): void {\n    evt.preventDefault();\n    \n    this.value = evt.detail;\n    this.inputIcon = evt.detail.length > 0 ? \"close\" : this.actionIcon;\n\n    this.changeInput.emit(this.value);\n  }\n\n  /**\n\t * Handles click event from vds-icon-button inside the input.\n   * Emits iconClick event.\n   * When inputIcon equals close, vds-basic-input gets clear.\n   * When inputIcon equals zoom, vds-basic-input gets focus.\n\t *\n   * @params evt - MouseEvent\n\t * @returns void\n\t */\n  private handleIconClick(evt: MouseEvent): void {\n    if (this.inputIcon === \"close\") {\n      this.clear();\n    }\n    if (this.inputIcon === this.actionIcon) {\n      this.setFocus();\n    }\n    this.iconClick.emit(evt);\n  }\n\n  /**\n\t * Handles click event from vds-icon-button when expanded is false\n   * Emits collapseIconClick event.\n\t *\n   * @params evt - MouseEvent\n\t * @returns void\n\t */\n  private handleCollapseIconClick(evt: MouseEvent): void {\n    this.collapseIconClick.emit(evt)\n  }\n\n  /**\n\t * Renders input when expanded is to set true.\n\t *\n\t * @returns HTMLStencilElement\n\t */\n  private renderInput(): HTMLStencilElement {\n    return <vds-basic-input\n      ref={(el): void => {\n        if (el) {\n          this.inputEl = el;\n        }\n      }}\n      size={\"medium\"}\n      type={\"text\"}\n      value={this.value}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      isReadonly={this.isReadonly}\n      formatter={this.formatter}\n      class={\"vds-sidenav-item-input\"}\n      error={this.error}\n      informativeIcon={this.informativeIcon}\n      onChangeInput={(evt): void => { this.handleChangeInput(evt); }}\n      {...cloneAttributes(\n        this.hostEl,\n        \"class\",\n        \"value\",\n        \"disabled\",\n        \"placeholder\",\n        \"label\",\n        \"style\"\n      )}\n    >\n      <vds-icon-button\n        slot=\"primaryActionIcon\"\n        onClick={(evt): void => { this.handleIconClick(evt); }}\n        icon={this.inputIcon}\n        variant=\"secondary\"\n        disabled={this.disabled}\n        size=\"medium\">\n      </vds-icon-button>\n    </vds-basic-input>\n  }\n\n  /**\n\t * Renders sidenav-item icon when expanded is to set false.\n\t *\n\t * @returns HTMLStencilElement\n\t */\n  private renderIcon(): HTMLStencilElement {\n    return <vds-sidenav-item\n          onClick={(evt): void => { this.handleCollapseIconClick(evt); }}\n          icon={this.actionIcon}\n          expanded={false}\n        ></vds-sidenav-item>\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__sidenav-item-input--disabled' : ''}>\n        {this.expanded ? this.renderInput() : this.renderIcon() }\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"vds-sidenav-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}