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

package/dist/esm/vds-avatar.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-avatar.entry.js","sources":["src/components/avatar/vds-avatar.scss?tag=vds-avatar&encapsulation=shadow","src/components/avatar/vds-avatar.tsx"],"sourcesContent":["@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: block;\n  .vds-avatar {  \n    width: var(--spacing-06);    \n    height: var(--spacing-06);\n    flex-shrink: 0;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: cover;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    overflow: hidden;\n    border: 1px solid var(--color-border-white-high);\n    box-sizing: border-box;\n  }\n  .vds-avatar--value{\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    color: var(--color-text-white-high);\n    text-align: center;\n    font-feature-settings: 'clig' off, 'liga' off;\n    @include font-style(title, medium);\n  }\n  .vds-avatar--picture {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    background-repeat: no-repeat;\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-avatar',\n  styleUrl: 'vds-avatar.scss',\n  shadow: true,\n})\nexport class VdsAvatar {\n  /**\n   * This property can receive:\n   * - Fullname to show the first letters inside the avatar.\n   * - Url of image.\n   * - +XX format for showing the number of additional users. Caps at +99.\n   */\n  @Prop() value: string;\n  /** Set icon size in px or rem, IE: 32px or 1.25rem */\n  @Prop() size: string = '20px';\n\n  setBackground: boolean;\n\n  private getNumberFormat(number: string): string {\n    const numValue = parseInt(number.substring(1), 10);\n    if (numValue > 99) {\n      return '+99';\n    }\n    return '+' + numValue;\n  }\n\n  private getNameInitials(name: string): string {\n    const parts = name.split(' ');\n    const firstInitial = parts[0].charAt(0);\n    const lastInitial = parts[parts.length - 1].charAt(0);\n    const initials = firstInitial + lastInitial;\n\n    return initials.toUpperCase();\n  }\n\n  getAvatarValue(value: string): string {\n    if (/^\\+\\d+$/.test(value)) {\n      return this.getNumberFormat(value);\n    }\n    return this.getNameInitials(value);\n  }\n\n  calcFontSize(size: string): string {\n    const regex = /^(\\d+)(px|rem)$/;\n    const match = size.match(regex);\n    if (match) {\n      const value = parseInt(match[1], 10) / 2;\n      const unit = match[2];\n      const calculated_font_size = value + unit;\n      return calculated_font_size;\n    }\n    throw new Error('Invalid size format. Please provide a valid size in px or rem.');\n  }\n  calcLineHeight(size: string): string {\n    const regex = /^(\\d+)(px|rem)$/;\n    const match = size.match(regex);\n    if (match) {\n      const value = parseFloat(match[1]);\n      const unit = match[2];\n      const lineHeight = ((value * 1.25) / 2).toFixed(2);\n      return lineHeight + unit;\n    }\n  }\n\n  getValueStyles(): {width: string, height: string, 'font-size': string} {\n    return ({\n      'width': this.size,\n      'height': this.calcLineHeight(this.size),\n      'font-size': this.calcFontSize(this.size)\n    })\n  }\n\n  getAvatarContent() {\n    if (this.value.startsWith('http')) {\n      this.setBackground = false;\n      return <img class=\"vds-avatar--picture\" src={this.value} alt=\"Avatar\" />;\n    } else {\n      this.setBackground = true;\n      const value = this.getAvatarValue(this.value);\n      return (\n        <span\n          class=\"vds-avatar--value\"\n          style={this.getValueStyles()}\n        >\n          {value}\n        </span>\n      );\n    }\n  }\n\n  setBackgroundColor(): string {\n    return this.setBackground ? 'var(--color-icon-high)' : 'transparent';\n  }\n\n  render(): HTMLStencilElement {\n    const avatarContent = this.getAvatarContent();\n\n    return (\n      <Host>\n        <div class={`vds-avatar`} style={{ 'width': this.size, 'height': this.size, 'background-color': this.setBackgroundColor() }}>\n          {avatarContent}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/vds-badge-dot.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vds-badge-dot.entry.js","sources":["src/components/badge-dot/vds-badge-dot.scss?tag=vds-badge-dot&encapsulation=shadow","src/components/badge-dot/vds-badge-dot.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  .vds-badge-dot__container {\n    position: relative;\n    .vds-badge-dot__thumb {\n      border-radius: var(--spacing-04);\n      position: absolute;\n\n      &.vds-badge-dot__thumb--size-medium {\n        width: var(--spacing-04);\n        height: var(--spacing-04);\n        --position-x: -0.68rem;\n        --position-y: -0.68rem;\n        &.vds-badge-dot__thumb--overlap {\n          --position-x: -0.368rem;\n          --position-y: -0.368rem;\n        }\n      }\n      &.vds-badge-dot__thumb--size-small {\n        width: var(--spacing-03);\n        height: var(--spacing-03);\n        --position-x:  -0.5rem;\n        --position-y:  -0.5rem;\n        &.vds-badge-dot__thumb--overlap {\n          --position-x: -0.25rem;\n          --position-y: -0.25rem;\n        }\n      }\n      &.vds-badge-dot__thumb--no-overlap {\n        transform: translate(-0.05rem, -0.05rem);\n      }\n      &.vds-badge-dot__thumb--position-top-right {\n        top: var(--position-y);\n        right: var(--position-x);\n      }\n      &.vds-badge-dot__thumb--position-top-left {\n        top: var(--position-y);\n        left: var(--position-x);\n      }\n      &.vds-badge-dot__thumb--position-bottom-right {\n        bottom: var(--position-y);\n        right: var(--position-x);\n      }\n      &.vds-badge-dot__thumb--position-bottom-left {\n        bottom: var(--position-y);\n        left: var(--position-x);\n      }\n      &.vds-badge-dot__thumb--color-warning {\n        background-color: var(--color-border-warning);\n      }\n      &.vds-badge-dot__thumb--color-danger {\n        background-color: var(--color-border-danger);\n      }\n      &.vds-badge-dot__thumb--color-healthy {\n        background-color: var(--color-background-healthy-default);\n      }\n      &.vds-badge-dot__thumb--color-information {\n        background-color: var(--color-background-information-default);\n      }\n      &.vds-badge-dot__thumb--color-neutral {\n        background-color: var(--color-background-general-default);\n      }\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { Colors } from '../../definitions/colors';\nimport { BADGE_VARIANTS } from '../badge-pill/vds-badge-pill.utils';\n\n@Component({\n  tag: 'vds-badge-dot',\n  styleUrl: 'vds-badge-dot.scss',\n  shadow: true,\n})\nexport class VdsBadgeDot {\n  /** Sets the badge's size */\n  @Prop() size: \"small\" | \"medium\" = \"medium\"\n  /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral \n   *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color. */\n  @Prop() statusColor: \"warning\" | \"danger\" | \"healthy\" | \"information\" | \"neutral\" | Colors = \"neutral\";\n  /** Sets the aria label in badge */\n  @Prop() setAriaLabel:string \n  /** Sets to overlap component content */\n  @Prop()  overlap : boolean   = false\n  /** Sets the position of the badge */\n  @Prop() position: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" = \"top-right\"\n  \n  \n  private isCustom: boolean;\n\n  componentWillRender(): void {\n    this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);\n  }\n\n  setCustomColorStyle() {\n    let style = {};\n\n    if (this.isCustom) {\n      return {\n        backgroundColor: `var(--${this.statusColor})`\n      };\n    }\n\n    return style;\n  }\n\n  render() {\n    return (\n      <Host aria-label={this.setAriaLabel}>\n        <div class={combineClasses(\"vds-badge-dot__container\")} aria-label={this.setAriaLabel}>\n          <div class={combineClasses(\n            \"vds-badge-dot__thumb\",\n            this.overlap ? \"vds-badge-dot__thumb--overlap\" : \"vds-badge-dot__thumb--no-overlap\",\n            `vds-badge-dot__thumb--size-${this.size}`,\n            `vds-badge-dot__thumb--color-${this.statusColor}`,\n            `vds-badge-dot__thumb--position-${this.position}`\n            )}\n            style={this.setCustomColorStyle()}\n          ></div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,04hCAA04hC;;MCUp5hC,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;AAC3C;AACsH;AAC9G,QAAA,IAAW,CAAA,WAAA,GAA0E,SAAS;;AAI7F,QAAA,IAAO,CAAA,OAAA,GAAe,KAAK;;AAE5B,QAAA,IAAQ,CAAA,QAAA,GAA8D,WAAW;AAuC1F;IAlCC,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG5D,mBAAmB,GAAA;QACjB,IAAI,KAAK,GAAG,EAAE;AAEd,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;AACL,gBAAA,eAAe,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAG,CAAA;aAC9C;;AAGH,QAAA,OAAO,KAAK;;IAGd,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAa,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,CAAC,YAAY,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CAAC,0BAA0B,CAAC,EAAA,YAAA,EAAc,IAAI,CAAC,YAAY,EAAA,EACnF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,CACxB,sBAAsB,EACtB,IAAI,CAAC,OAAO,GAAG,+BAA+B,GAAG,kCAAkC,EACnF,CAAA,2BAAA,EAA8B,IAAI,CAAC,IAAI,CAAE,CAAA,EACzC,CAA+B,4BAAA,EAAA,IAAI,CAAC,WAAW,CAAA,CAAE,EACjD,CAAA,+BAAA,EAAkC,IAAI,CAAC,QAAQ,CAAE,CAAA,CAChD,EACD,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,EAC5B,CAAA,EACP,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}