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

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-tab.entry.esm.js","sources":["src/components/tab/vds-tab.scss?tag=vds-tab&encapsulation=shadow","src/components/tab/vds-tab.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n:host {\n  display: block;\n  box-sizing: border-box;\n  border-radius: var(--radius-medium);  \n  height: 2.25rem;\n  width: var(--tab-width, fit-content);\n  @if (--tab-max-width) {\n    max-width: var(--tab-max-width);\n  }\n  .vds__tab {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 2.25rem;\n    width: var(--tab-width, fit-content);\n    @if (--tab-max-width) {\n      max-width: var(--tab-max-width);\n    }    \n    box-sizing: border-box;\n    border: none;\n    box-shadow: 0 0 0 0.125rem inset transparent;\n    &:focus-visible {\n      border-radius: var(--radius-medium);\n      outline: 0.125rem solid var(--color-border-focus-2);\n      outline-offset: 0.125rem;\n    }\n    &:hover {\n      background-color: transparent;\n      border-radius: var(--radius-medium);\n      .vds__tab--label{\n        color: var(--color-text-high);\n      }\n      vds-icon {\n        fill: var(--color-icon-high);\n      }\n    }    \n  }\n  .vds__tab--with-action-content{\n    &:focus-within{\n      ~ .vds__tab--with-action ~ .vds__tab-container ~ .vds__tab {\n        border-radius: var(--radius-medium);\n        outline: 0.125rem solid var(--color-border-focus-2);\n        outline-offset: 0.125rem;\n      }\n    }\n  }\n  .vds__tab--with-action-actionable{\n    height: 1.25rem;\n    width: 1.25rem;    \n  }\n  .vds__tab--active {\n    border-radius: var(--radius-medium);\n    &:hover {\n      background-color: transparent;\n      .vds__tab--label{\n        color: var(--color-link-default);\n      }\n      vds-icon {\n        fill: var(--color-icon-brand-default);\n      }\n    } \n  }\n  .vds__tab--disabled {\n    pointer-events: none;\n  }\n  .vds__tab--spacing {\n    padding: var(--spacing-03) var(--spacing-00)  var(--spacing-03)  var(--spacing-00);\n  }\n  .vds__tab--content {\n    display: none;\n  }\n  .vds__tab--content-active {\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    cursor: auto;\n  }\n  .vds__tab--spacing-between-content {\n    padding-left: var(--spacing-03);\n  }\n  .vds__tab--label {\n    @include font-style(title, small);\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-style: normal;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-wrap: nowrap;\n  }\n  .vds__tab--label-default {\n    @if (--tab-max-width) {\n      max-width: calc(var(--tab-max-width) - 1.70rem);\n    }\n  }\n  .vds__tab--label-text {\n    @if (--tab-max-width) {\n      max-width: var(--tab-max-width);\n    }\n  }\n  .vds__tab--label-with-action{\n    width: fit-content;\n  }\n  .vds__tab--label-with-action-fixed-max-width{\n    @if(--tab-max-width){\n      max-width: calc(var(--tab-max-width, 100%) - 3.5rem);\n    }\n  }\n  .vds__tab--label-with-action-fixed-width{\n    @if(--tab-width) {\n      width: calc(var(--tab-width, fit-content)  - 3.5rem);\n    }\n  }\n  .vds__tab--label-disabled {\n    color: var(--color-text-disabled);\n  }\n  .vds__tab--label-active {\n    color: var(--color-link-default);\n  }\n  .vds__tab-container {\n    align-self: flex-start;\n    width: var(--tab-width, fit-content);\n    height: 1.25rem;\n  }\n  .vds__tab--default {\n    display: inline-flex;\n    justify-content: center;\n    color: var(--color-text-medium);\n    background-color: transparent;\n    line-height: 1.25rem;\n    width: var(--tab-width, fit-content);\n  }\n\n  .vds__tab--text {\n    display: inline-flex;\n    justify-content: center;\n    color: var(--color-text-medium);\n    background-color: transparent;\n    line-height: 1.25rem;\n    width: var(--tab-width, fit-content);\n  }\n\n  .vds__tab--with-action {\n    display: inline-flex;\n    align-items: flex-start;\n    justify-content: center;\n    color: var(--color-text-medium);\n    background-color: transparent;\n    line-height: 1.25rem;\n    width: var(--tab-width, fit-content);\n    .vds__tab--with-action-content {\n      display: inline-flex;\n    }\n  }\n  .vds__tab--icon {\n    display: inline-block;\n    width: var(--tab-width, fit-content);\n    height: 1.25rem;\n    .vds__tab--icon-container {\n      display: inline-block;\n    }\n  }\n  \n  .vds__tab--action-icon-button {\n    display: inline-flex;\n    height: 1.25rem;\n    width: 1.25rem;\n    box-sizing: border-box;\n  }\n\n  .vds__tab--custom {\n    display: inline-flex;\n    padding: var(--spacing-01);\n    width: var(--tab-width, fit-content);\n  }\n}\n:host(:hover) {\n  cursor: pointer;\n}\n\n:host-context(.vds__tab--disabled) {\n  pointer-events: none;\n}","import { Component, Host, Prop, h, Event, EventEmitter, Element, Listen, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-tab',\n  styleUrl: 'vds-tab.scss',\n  shadow: true,\n})\nexport class VdsTab {\n  @Element() hostEl: HTMLElement;\n  /** Sets tab title. The value of this property is used by default as an aria-label too. */\n  @Prop() value: string;\n  /** \n   * @deprecated This property is now being overridden by the VdsTabsGroup, \n   * the activeTabIndex property is the new preferred way of setting the default tab. \n   * Sets tab to active state.\n   */\n  @Prop({ mutable: true, reflect: true }) isActive: boolean = false;\n  /** Sets tab to disable state */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n  /** \n   * @deprecated This property is being replaced by informativeIcon. \n   * Sets tab icon. The tab icon is only a visual representation. \n   */\n  @Prop({ mutable: true }) icon?: string;\n  /** Sets tab icon. The tab icon is only a visual representation. */\n  @Prop({ mutable: true }) informativeIcon?: string;\n  /** Sets tab fixed width. This property can't be used at the same time with the property maxWidth */\n  @Prop({ mutable: true }) width: string;\n  /** Sets tab maxWidth. This property can't be used at the same time with the property width */\n  @Prop({ mutable: true }) maxWidth: string;\n  /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */\n  @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom'= 'default';\n  /** Sets tab action icon button. Only available selecting withAction type. */\n  @Prop({ mutable: true }) actionIcon: string;\n  /** Sets tab action icon button aria-label*/\n  @Prop({ mutable: true }) actionAriaLabel: string;\n  /** Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property. */\n  @Prop({ mutable: true }) setAriaLabel: string;\n  /** Emits event when the tab is selected (sets isActive prop to true) */\n  @Event() isSelected: EventEmitter<MouseEvent>;\n  /** Emits event when the action icon button is clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n  /** Emits event when the value is changed */\n  @Event() valueChanged: EventEmitter<string>;\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if ((event.target as HTMLElement).nodeName === \"VDS-TAB\" && event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault(); \n      if (!this.isActive && !this.disabled) {\n        this.isActive = true;\n        this.isSelected.emit();\n      }\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.valueChanged.emit(this.value);\n  }\n\n  private generateIcon() {\n    const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon? this.icon : null;\n    if (iconToUse) {\n      return (\n        <span class=\"vds__tab--icon-container\">\n          <vds-icon \n            svgIcon={iconToUse} \n            color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium'}\n            size=\"1.25rem\">\n          </vds-icon>\n        </span>\n      );\n    } else {\n      console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');\n    }\n  }\n\n  private generateActionIconButton() {\n    if (this.actionIcon) {\n      return (\n        <span class=\"vds__tab--action-icon-button\">\n          <vds-icon-button\n            icon={this.actionIcon}\n            variant=\"tertiary\"\n            size=\"small\"\n            setAriaLabel={this.actionAriaLabel}\n            onClick={(evt: MouseEvent) => {\n              this.handleActionIconClick(evt);\n            }}\n            disabled={this.disabled}\n          ></vds-icon-button>\n        </span>\n      );\n    } else {\n      console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');\n    }\n  }\n  private generateLabel() {\n    if ((this.value === undefined || this.value === '') && this.type !== 'icon') {\n      console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');\n    }  \n    return (\n      <span class={\n        combineClasses(\n          'vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '',\n          this.type==='default' ? 'vds__tab--label-default' : '',\n          this.type==='text' ? 'vds__tab--label-text' : '',\n          this.type==='withAction' ? 'vds__tab--label-with-action' : '',\n          this.type==='withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '',\n          this.type==='withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : ''\n        )}\n      >\n        {this.value}\n      </span>\n    );\n  }\n  private generateTypeDefault() {\n    return (\n      <div class=\"vds__tab--default\">\n        {this.generateIcon()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        {this.generateLabel()}\n      </div>\n    );\n  }\n  private generateTypeIcon() {\n    return (\n      <div class=\"vds__tab--icon\">{this.generateIcon()}</div>\n    );\n  }\n\n  private generateTypeWithAction() {\n    return (\n      <div class=\"vds__tab--with-action\">\n        <div class=\"vds__tab--with-action-content\" tabindex={this.disabled ? \"-1\" :\"0\"}>\n        {this.generateIcon()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        {this.generateLabel()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        </div>\n        <div class=\"vds__tab--with-action-actionable\">\n          {this.generateActionIconButton()}\n        </div>\n      </div>\n    );\n  }\n  private generateTypeCustom() {\n    return (\n      <div class=\"vds__tab--custom\">\n        <slot name=\"tab-header-content\"></slot>\n      </div>\n    );\n  }\n    private generateTypeText() {\n    return (\n      <div class=\"vds__tab--text\">\n        {this.generateLabel()}\n      </div>\n    );\n  }\n  // getType: return the formatted content\n  private getType() {\n    switch (this.type) {\n      case 'default': {\n        return this.generateTypeDefault();\n      }\n      case 'icon': {\n        return this.generateTypeIcon();\n      }\n      case 'withAction': {\n        return this.generateTypeWithAction();\n      }\n      case 'custom': {\n        return this.generateTypeCustom();\n      }\n      case 'text': {\n        return this.generateTypeText();\n      }\n    }\n  }\n  private handleClick(evt: MouseEvent): void {\n    if (!this.isActive && !this.disabled) {\n      this.isActive = true;\n      this.isSelected.emit(evt);\n    }\n  }\n  private handleActionIconClick(evt: MouseEvent): void {\n    if (this.type === 'withAction') {\n      evt.stopPropagation();\n      this.clicked.emit(evt);\n    }\n  }\n  \n  // setStyle define the width depending the properties prioritizing the width over the maxWidth\n  private setStyle() {\n    if (this.width) {\n      return { '--tab-width': this.width };\n    } else if (this.maxWidth) {\n      return { '--tab-max-width': this.maxWidth };\n    } else {\n      return {};\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.setStyle()} class={this.disabled ? 'vds__tab--disabled' : ''}>\n        <div\n          class={combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : '')}\n          role=\"tab\"\n          aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n          tabindex={this.disabled ? \"-1\" :\"0\"}\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n        >\n          <div class=\"vds__tab-container\">\n            {this.getType()}\n          </div>\n        </div>\n        <div class={this.isActive ? 'vds__tab--content-active' : 'vds__tab--content'}>\n          <slot name=\"tab-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-tooltip.entry.esm.js","sources":["src/components/tooltip/vds-tooltip.scss?tag=vds-tooltip&encapsulation=shadow","src/components/tooltip/vds-tooltip.tsx"],"sourcesContent":["@import \"~@volt/volt-foundations/dist/volt-foundations/volt-foundations\";\n\n:host {\n  display: flex;\n  width: fit-content;\n  .vds__tooltip-container {\n    display: none;\n    position: absolute;\n    width: 5.31rem;\n    height: 2.25rem;\n    height:max-content;\n    width: max-content;\n    max-width: var(--tooltip-max-width) !important;\n    flex-direction: column;\n    align-items: center;\n    border-radius: var(--radius-medium);\n    background: var(--surface-overlay-default);\n    padding: var(--spacing-03);\n    z-index: var(--elevation-layer-2);\n    box-shadow: var(--elevation-shadow-2);\n  }\n  .vds__tooltip-container-text{\n    color: var(--color-text-white-high);\n    font-feature-settings: 'clig' off, 'liga' off;\n    @include font-style(body, medium);\n  }  \n  .vds__tooltip-arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.25rem;\n    z-index: var(--elevation-layer-2);\n  }\n\n  .vds__tooltip-arrow-img {\n    fill: var(--surface-overlay-default);\n    display: flex;\n    width: 0.5rem;\n    height: 0.25rem;\n  }\n}\n","import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from '@stencil/core';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n\n@Component({\n  tag: 'vds-tooltip',\n  styleUrl: 'vds-tooltip.scss',\n  shadow: true,\n})\nexport class VdsTooltip {\n  @Element() hostEl: HTMLElement;\n  /** standard type receives the text in the \"text\" property, \"custom\" is an slot to include any html element inside the tooltip, \"manual\" allow open and close the tooltip only with the public methods  */\n  @Prop() type: \"standard\" | \"custom\" | \"manual\" = \"standard\";\n  /** Sets the tooltip text, does not apply for custom tooltip */\n  @Prop({mutable: true}) text?: string;\n  /** Defines the position where the tooltip will be opened */\n  @Prop({mutable: true}) position: 'top' | 'bottom' | 'right' | 'left' = 'top';\n  /** Sets the maximum width of the tooltip's content */\n  @Prop({mutable: true}) maxWidth: string = \"10rem\";\n  /** The type of event that will trigger the tooltip */\n  @Prop({mutable: true}) event: 'hover' | 'click' = 'hover';\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   * */\n  @Prop({mutable: true}) autoPosition: boolean = false;\n\n  @State() popupOpened: boolean = false;\n  \n  /** Emits event when tooltip gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when tooltip gets closes */\n  @Event() closed: EventEmitter<void>;\n  \n  floatingCleanup: () => void = () => {};\n\n  @Watch(\"popupOpened\")\n  async emitValue(): Promise<void> {\n    if (this.popupOpened){\n      this.opened.emit();\n      this.tooltipElementRef.style.display = 'inline-flex';\n      this.floatingCleanup = await updateFloatingBoxPosition(this.actionElementRef, this.tooltipElementRef, this.arrowElementRef, this.position, this.autoPosition);\n    }\n    else{\n      this.closed.emit();\n      this.tooltipElementRef.style.display = 'none';\n      this.floatingCleanup();\n    }\n  }\n\n  /* Close the tooltip when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside && this.type !== 'manual') {\n      this.popupOpened = false;\n    }\n  }\n\n  /* Open the tooltip with click on the trigger element  */\n  @Listen('click')\n  private handleClick(event: Event): void {\n    if (this.event === 'click' && this.type !== 'manual') {\n      const clickedElement = event.target as HTMLElement;\n      if (clickedElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n\n  /* Open the tooltip from other element  */ \n  @Method()\n  public async open(): Promise<void> {\n    this.popupOpened = true;\n  }\n\n  /* Close the tooltip from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.popupOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the tooltip\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__tooltip-container') as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = false; \n      }\n    }\n  }\n\n  private setMaxWidth(){\n    return {'--tooltip-max-width': this.maxWidth} \n  }\n  \n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private tooltipElementRef: HTMLElement;\n  \n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__tooltip-trigger');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__tooltip-arrow');\n    this.tooltipElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__tooltip-container');\n\n    window.addEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this)); \n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }\n\n  render(): HTMLStencilElement { \n    return (\n      <Host style={this.setMaxWidth()}>\n        <div class=\"vds__tooltip-trigger\"\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);              \n          }}\n          ref={(triggerEl) => { if(triggerEl)this.actionElementRef = triggerEl; }}\n          \n        >\n          <slot name=\"tooltip-trigger\"></slot>\n        </div>\n        <div\n          class=\"vds__tooltip-container\" \n          ref={(tooltipEl) => {  if(tooltipEl)this.tooltipElementRef = tooltipEl; }}\n        >          \n          <div>\n            { this.type ==='standard'|| this.type ==='manual'?<span class=\"vds__tooltip-container-text\">{this.text}</span> : <slot name=\"tooltip-content\"></slot>}\n          </div>\n          <div class=\"vds__tooltip-arrow\" ref={(tooltipArrowEl) => {  if(tooltipArrowEl)this.arrowElementRef = tooltipArrowEl; }}>\n            <svg class=\"vds__tooltip-arrow-img\" width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"tooltip-caret-filled-small\" d=\"M0 0L4 4L8 0H0Z\" fill=\"var(--surface-overlay-default)\"/>\n            </svg>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"vds-upload-drag.entry.esm.js","sources":["src/components/upload-drag/vds-upload-drag.scss?tag=vds-upload-drag&encapsulation=shadow","src/components/upload-drag/vds-upload-drag.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: fit-content;\n  cursor: pointer;\n\n  --vds-upload-drag-icon-gap: var(--spacing-05);\n\n  --vds-upload-drag-border-color: var(--color-border-low);\n  --vds-upload-drag-border-drag-color: var(--color-border-brand);\n  --vds-upload-drag-background-color: var(--surface-medium);\n  --vds-upload-drag-background-drag-color: rgba(0, 125, 186, 0.04);\n\n  vds-card {\n    --vds-card-default-border-color: var(--vds-upload-drag-border-color);\n    --vds-card-default-background-color: var(--vds-upload-drag-background-color);\n\n    &.vds-card--drag-active {\n      --vds-card-default-border-color: var(--vds-upload-drag-border-drag-color);\n      --vds-card-default-background-color: var(--vds-upload-drag-background-drag-color);\n    }\n  }\n\n  .vds-upload__content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    gap: var(--vds-upload-icon-gap);\n\n    .vds-upload__body {\n      display: flex;\n      flex-direction: column;\n\n      .vds-upload__title {\n        color: var(--color-text-high);\n        @include font-style(title, medium);\n      }\n\n      .vds-upload__description {\n        color: var(--color-text-medium);\n        @include font-style(body, medium);\n      }\n    }\n\n  }\n}","import { Component, Host, h, Prop, Event, State } from '@stencil/core';\nimport { EventEmitter } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-upload-drag',\n  styleUrl: 'vds-upload-drag.scss',\n  shadow: true,\n})\nexport class VdsUploadDrag {\n  /** The title of the upload area */\n  @Prop() title: string = 'Click or drag file to this area to upload';\n  /** The description of the upload area */\n  @Prop() description: string =\n    'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files';\n\n  /** Specifies the multiple prop in the input[type=\"file\"] */\n  @Prop() multiple: boolean = true;\n  /** Specifies the accept prop in the input[type=\"file\"] */\n  @Prop() accept?: string;\n  /** Specifies the capture prop in the input[type=\"file\"] */\n  @Prop() capture?: 'user' | 'environment';\n\n  /** Emits the value of the selected files */\n  @Event() fileSelected: EventEmitter<File[]>;\n\n  @State() isDragging: boolean = false;\n\n  private fileInput?: HTMLInputElement;\n\n  private handleDragOver = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    event.dataTransfer.dropEffect = 'copy';\n    this.isDragging = true;\n  };\n\n  private handleDragLeave = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging = false;\n  };\n\n  private handleDrop = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging = false;\n    const files = event.dataTransfer?.files;\n    if (files && files.length > 0) {\n      this.handleFiles(Array.from(files));\n    }\n  };\n\n  private handleClick = () => {\n    this.fileInput?.click();\n  };\n\n  private handleFileInputChange = () => {\n    const files = this.fileInput?.files;\n    if (files && files.length > 0) {\n      this.handleFiles(Array.from(files));\n    }\n  };\n\n  private handleFiles(files: File[]) {\n    this.fileSelected.emit(files);\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={this.handleClick}\n        onDragOver={this.handleDragOver}\n        onDragLeave={this.handleDragLeave}\n        onDrop={this.handleDrop}\n      >\n        <input\n          type=\"file\"\n          ref={el => (this.fileInput = el as HTMLInputElement)}\n          onChange={this.handleFileInputChange}\n          multiple={this.multiple}\n          accept={this.accept}\n          capture={this.capture}\n          hidden\n        />\n        <vds-card\n          padding=\"spacing-09\"\n          shadowBox=\"elevation-shadow-0\"\n          class={{ 'vds-card--drag-active': this.isDragging }}\n        >\n          <div class=\"vds-upload__content\">\n            <slot name=\"icon\"></slot>\n            <div class=\"vds-upload__body\">\n              <span class=\"vds-upload__title\">{this.title}</span>\n              <span class=\"vds-upload__description\">{this.description}</span>\n            </div>\n          </div>\n        </vds-card>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}