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

package/dist/cjs/vds-header.cjs.entry.js.map

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

package/dist/cjs/vds-header.entry.cjs.js.map

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

package/dist/cjs/vds-key-value-pair.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"vds-key-value-pair.entry.cjs.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,oiiCAAoiiC;;MCSljiC,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAa,CAAA,aAAA,GAAqB,KAAK;;AAMvC,QAAA,IAAS,CAAA,SAAA,GAAe,aAAa;;AAMrC,QAAA,IAAS,CAAA,SAAA,GAAe,gBAAgB;AAkBjD;IAhBC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiD,8CAAA,EAAA,IAAI,CAAC,aAAa,CAAE,CAAA,EAAA,EAC/EA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAkB,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA,CAAE,EAAG,EAAA,IAAI,CAAC,KAAK,CAAQ,EACpEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAkB,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA,CAAE,EAAG,EAAA,IAAI,CAAC,KAAK,CAAQ,EACpEA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,CACF,CACD;;;;;;;","names":["h","Host"],"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/cjs/vds-key-value-pair.entry.cjs.js.map

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

package/dist/cjs/vds-notification.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"vds-notification.entry.cjs.js","mappings":"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","names":["h","Host","combineClasses"],"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/cjs/vds-notification.entry.cjs.js.map

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

package/dist/cjs/vds-popover.cjs.entry.js.map

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

package/dist/cjs/vds-popover.entry.cjs.js.map

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

package/dist/cjs/vds-progress-linear.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"vds-progress-linear.entry.cjs.js","mappings":"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","names":["h","Host","combineClasses"],"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/cjs/vds-progress-linear.entry.cjs.js.map

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

package/dist/cjs/vds-radio-button.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"vds-radio-button.entry.cjs.js","mappings":"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","names":["getIconSize","h","Host","combineClasses"],"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/cjs/vds-radio-button.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-radio-button.entry.cjs.js","sources":["src/components/radio-button/vds-radio-button.scss?tag=vds-radio-button&encapsulation=shadow","src/components/radio-button/vds-radio-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  input {\n    outline: none;\n    border: 0;\n    appearance: none;\n    margin: 0;\n    padding: 0;\n  }\n  label {\n    cursor: pointer;\n  }\n\n  .vds-radio-button__container {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    box-sizing: content-box;\n    border: var(--spacing-01) solid transparent;\n    appearance: none;\n\n    .radio-button-label::part(label) {\n      cursor: pointer;\n    }\n\n    .vds-radio-button {\n      display: flex;\n    }\n    \n    &:focus-within {\n      outline: none;\n      border-radius: var(--spacing-02);\n      border: var(--spacing-01) solid var(--color-border-brand);\n    }\n\n    &.vds-radio-button__container--label-alignment-start {\n      flex-direction: row-reverse;\n    }\n\n    &.vds-radio-button__container--label-alignment-end {\n      flex-direction: row;\n    }\n\n    &.vds-radio-button__container--size-medium {\n      gap: var(--spacing-03);\n      padding: calc(var(--spacing-03) - 0.125rem);\n    }\n    &.vds-radio-button__container--size-large {\n      gap: var(--spacing-04);\n      padding: calc(var(--spacing-04) - 0.125rem);\n    }\n\n    &.vds-radio-button--error {\n      .radio-button-icon::part(svg-icon) {\n        color: var(--color-icon-danger);\n        fill: var(--color-icon-danger);\n      }\n    }\n    &.vds-radio-button--disabled {\n      pointer-events: none;\n      .radio-button-icon::part(svg-icon) {\n        color: var(--color-icon-general);\n        fill: var(--color-icon-general);\n      }\n    }\n  }\n}  \n\n:host-context(.vds-radio-button--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Element, AttachInternals, EventEmitter, Event, Watch, Method } from '@stencil/core';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { RadioButtonChecked } from './vds-radio-button.utils';\n\n@Component({\n  tag: 'vds-radio-button',\n  styleUrl: 'vds-radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsRadioButton {\n\n  /** Defines the size of the radio */ \n  @Prop({ mutable: true, reflect: true }) size: \"large\" | \"medium\" = \"medium\";\n  /** Sets the radio in checked state */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Sets the radio in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Sets the radio in error state */\n  @Prop({ mutable: true, reflect: true }) error: boolean = false;\n  /** It’s useful for identifying in a radio group */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Aligns the label in relation to the radio-button*/\n  @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n  /** Sets the text to be shown in the radio-button */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Makes a custom change to target property using checked (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n  /** Emits radio button checked value */\n  @Event() radioCheck: EventEmitter<RadioButtonChecked>;\n\n  private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setRadioState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the radio-button is being click.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(_: MouseEvent): void {\n    if (!this.disabled) {\n      this.checked = true;\n      this.emitValues();\n    }\n\t}\n\n   /**\n   * Toggles radio-button value. \n   * When parameter is not provided, if true get set to false. When false get set to true.\n   * Emits check event with checked value.\n   *\n   * @param checked - Boolean (Optional)\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(checked: boolean = undefined): Promise<void> {\n    if (!this.disabled) {\n\t\t\tthis.checked = checked === undefined ? !this.checked : checked;\n      this.emitValues()\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Emits event values when radio button state changed.\n   * Emits check event with checked prop.\n   * Emits input event with value prop.\n   *\n   * @returns void\n   */\n  private emitValues(): void {\n    const inputEvent = new InputEvent(\"input\");\n    this.value = this.value ? this.value : this.checked.toString();\n    this.check.emit(this.checked);\n    this.radioCheck.emit({\n      checked: this.checked,\n      value: this.value,\n      element: this.hostEl as HTMLVdsRadioButtonElement\n    });\n    this.hostEl.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Determine state of the radio based on the checked property.\n   * When checked is true, state is checked.\n   * When checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setRadioState(): void {\n    this.state = this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderRadioButton(): HTMLStencilElement {\n    const size = getIconSize(this.size);\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class=\"radio-button-icon radio-button-icon-checked\" svgIcon={`radio-checked`} size={size}></vds-icon>;\n      default:\n        return <vds-icon class=\"radio-button-icon\" svgIcon={`radio-unchecked`} size={size}></vds-icon>;\n    }\n  }\n\n   /**\n   * Returns the vds-label for the radio-button when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label\n      class={\"radio-button-label\"}\n      labelValue={this.labelValue}\n      size={this.size}\n      disabled={this.disabled}></vds-label>\n  }\n\n  render() {\n    return (\n      <Host state={this.state} class={this.disabled ? \"vds-radio-button--disabled\" : \"\"}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds-radio-button__container\",\n            `vds-radio-button__container--size-${this.size}`,\n            `vds-radio-button__container--label-alignment-${this.labelAlignment}`,\n            this.checked ? \"vds-radio-button--checked\" : \"\",\n            this.disabled ? \"vds-radio-button--disabled\" : \"\",\n            this.error ? \"vds-radio-button--error\" : \"\"\n          )}\n        >\n          <div class=\"vds-radio-button\">\n            <input\n              type={\"radio\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderRadioButton()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["getIconSize","h","Host","combineClasses"],"mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,wqgCAAwqgC;;MCYrrgC,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;;;AAS0C,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;;AAEnC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAEvC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEV,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAItD,QAAA,IAAc,CAAA,cAAA,GAAoB,KAAK;AAavC,QAAA,IAAK,CAAA,KAAA,GAA4B,WAAW;AA6IrD;IA3IC,mBAAmB,GAAA;QACjB,IAAI,CAAC,aAAa,EAAE;;IAGtB,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;;;AAIxD;;;;;AAKG;IAEH,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;;;AAIxD;;;;;AAKG;AACJ,IAAA,WAAW,CAAC,CAAa,EAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,UAAU,EAAE;;;AAIpB;;;;;;;AAOE;IAEH,WAAW,CAAC,UAAmB,SAAS,EAAA;AACtC,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,OAAO,KAAK,SAAS,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,OAAO;YAC3D,IAAI,CAAC,UAAU,EAAE;;AAEnB,QAAA,OAAO,OAAO,CAAC,OAAO,EAAE;;AAG1B;;;;;;AAMG;IACK,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC;QAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;QAC9D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC;;AAGvC;;;;;;AAMG;IACK,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW;;AAGrD;;;;AAIG;IACK,iBAAiB,GAAA;QACvB,MAAM,IAAI,GAAGA,0BAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,QAAO,IAAI,CAAC,KAAK;AACf,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAOC,OAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,6CAA6C,EAAC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,GAAa;AACxH,YAAA;AACE,gBAAA,OAAOA,OAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAa;;;AAInG;;;;AAIE;IACK,WAAW,GAAA;AACjB,QAAA,OAAOA,OAAA,CAAA,WAAA,EAAA,EACL,KAAK,EAAE,oBAAoB,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAc;;IAGzC,MAAM,GAAA;;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,4BAA4B,GAAG,EAAE,EAAA,EAC/ED,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,CAAC,GAAG,KAAY,EAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA,EAAC,EAC/C,KAAK,EAAEE,6BAAc,CACnB,6BAA6B,EAC7B,qCAAqC,IAAI,CAAC,IAAI,CAAE,CAAA,EAChD,gDAAgD,IAAI,CAAC,cAAc,CAAA,CAAE,EACrE,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,EAAE,EAC/C,IAAI,CAAC,QAAQ,GAAG,4BAA4B,GAAG,EAAE,EACjD,IAAI,CAAC,KAAK,GAAG,yBAAyB,GAAG,EAAE,CAC5C,EAAA,EAEDF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,EAAE,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC5B,IAAI,CAAC,iBAAiB,EAAE,CACrB,EACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAClC,CACD;;;;;;;;;;;;"}

package/dist/cjs/vds-segmented-button.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"vds-segmented-button.entry.cjs.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,8ymCAA8ymC;;MCS/zmC,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;AAS2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAEZ,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAI1C,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAgEnC;IApDC,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;aACf;AACL,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;;AAI1B,IAAA,WAAW,CAAC,GAAe,EAAA;QACzB,GAAG,CAAC,cAAc,EAAE;AAEpB,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC;AAChB,SAAA,CAAC;;IAGJ,uBAAuB,GAAA;AACrB,QAAA,QACEA,OAAA,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,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAEC,6BAAc,CACnB,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EACrD,IAAI,CAAC,SAAS,GAAG,kCAAkC,GAAG,EAAE,CACzD,EAAA,EAEDF,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAEE,6BAAc,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,EACjGF,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,4BAA4B,EAAA,EAAGA,oEAAa,CAAQ,CAC1D,CACJ;;;;;;;;;;;","names":["h","Host","combineClasses"],"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/cjs/vds-segmented-button.entry.cjs.js.map

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

package/dist/cjs/vds-sheet.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"vds-sheet.entry.cjs.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,40gCAA40gC;;MCSn1gC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAER,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAExC,QAAA,IAAM,CAAA,MAAA,GAAW,MAAM;;AAEvB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAS/B,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAC3B,QAAA,IAAA,CAAA,aAAa,GAAW,EAAE,CAAC;AAqCnC;;AAEG;AACK,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAA8B,KAAU;YACjE,IAAI,IAAI,CAAC,cAAc;gBAAE;AAEzB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;YACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AAExC,YAAA,IAAI,SAAS,IAAI,KAAK,EAAE;AACtB,gBAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC/E,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC;;iBACpD;gBACL,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC;gBAC3D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;;AAG1D,YAAA,IAAI,KAAK,CAAC,UAAU,EAAE;gBACpB,KAAK,CAAC,cAAc,EAAE;;AAE1B,SAAC;AAEO,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,KAA8B,KAAU;;AAChE,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc;gBAAE;YAE7C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,UAAU;;AAGzC,YAAA,IAAI,MAAM,GAAG,CAAC,EAAE;AACd,gBAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,uBAAuB,CAAgB;gBAC3F,IAAI,SAAS,EAAE;oBACb,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,CAAc,WAAA,EAAA,MAAM,KAAK;;;AAIzD,YAAA,IAAI,KAAK,CAAC,UAAU,EAAE;gBACpB,KAAK,CAAC,cAAc,EAAE;;AAE1B,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAA8B,KAAU;;AAC/D,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc;gBAAE;YAE7C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACvC,YAAA,MAAM,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,UAAU;AACzC,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,uBAAuB,CAAgB;YAE3F,IAAI,SAAS,EAAE;AACb,gBAAA,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE;AAE9B,gBAAA,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE;oBAC/B,IAAI,CAAC,KAAK,EAAE;;;YAIhB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC;YAC5D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;AAE3D,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,YAAA,IAAI,CAAC,UAAU,GAAG,CAAC;AACrB,SAAC;AAqDF;IAtJC,SAAS,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE;;aACxB;AACL,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE;;;;AAMjC,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;YACzC,IAAI,CAAC,KAAK,EAAE;;;AAIhB;;;AAGG;AAEH,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;AAGpB;;;AAGG;AAEH,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;AAoEb,IAAA,UAAU,CAAC,KAA8B,EAAA;AAC/C,QAAA,IAAI,SAAS,IAAI,KAAK,EAAE;AACtB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;YACzD,OAAO,KAAK,CAAC,OAAO;;QAEtB,OAAO,KAAK,CAAC,OAAO;;AAGtB;;;AAGG;IACK,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;AAC1B,YAAA,OAAO,EAAE;;QAEX,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC7B,MAAM,YAAY,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;AAC5C,YAAA,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,CAAA,EAAA,CAAI,EAAE;;AAGxC,QAAA,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;;IAGxB,cAAc,GAAA;AACpB,QAAA,OAAOA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAEC,6BAAc,CAAC,qBAAqB,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,GAAQ;;IAG1I,gBAAgB,GAAA;QACtB,IAAI,IAAI,CAAC,cAAc;AAAE,YAAA,OAAO,IAAI;AAEpC,QAAA,QACED,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAC,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,CAAC,eAAe,EAAA,EACvGA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAO,CAAA,CAC1C;;IAIV,MAAM,GAAA;AACJ,QAAA,QACEA,QAACE,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,mBAAmB,GAAG,mBAAmB,EAAA,EACzK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,EACvCF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAEC,6BAAc,CAAC,sBAAsB,EAAE,IAAI,CAAC,MAAM,GAAG,8BAA8B,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAA,EACnI,IAAI,CAAC,gBAAgB,EAAE,EACxBD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;","names":["h","combineClasses","Host"],"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/cjs/vds-sheet.entry.cjs.js.map

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

package/dist/cjs/vds-sidenav-item-app.cjs.entry.js.map

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

package/dist/cjs/vds-sidenav-item-app.entry.cjs.js.map

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

package/dist/cjs/vds-sidenav-item-button.cjs.entry.js.map

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

package/dist/cjs/vds-sidenav-item-button.entry.cjs.js.map

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

package/dist/cjs/vds-sidenav-item-category.cjs.entry.js.map

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

package/dist/cjs/vds-sidenav-item-category.entry.cjs.js.map

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