{"file":"patternlib-textlink.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ipOAAipO;;MCYlqO,kBAAkB;;;iBASb,EAAE;iBAKF,MAAM;gBAKP,EAAE;gBAKe,KAAK;kBAKK,OAAO;mBAKb,OAAO;wBAIF,MAAM;qBAK3B,IAAI;gBAKT,IAAI;oBAKA,KAAK;;EAExB,iBAAiB;IACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC5E,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;GAC7D;EAED,mBAAmB;IACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;GAC7D;EAEO,kBAAkB,CAAC,MAA+B;IACxD,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC/B,IAAI,YAAY,KAAK,GAAG,EAAE;MACxB,OAAO,IAAI,MAAM,EAAoB,CAAC;KACvC;IACD,OAAO,MAAwB,CAAC;GACjC;EAED,MAAM;IACJ,MAAM,aAAa,GAAe;MAChC,QAAQ,EAAE,IAAI;MACd,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;MACjB,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;MACpB,CAAC,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI;MAClD,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;KACxB,CAAC;IAEF,MAAM,WAAW,GAAe;MAC9B,CAAC,yCAAyC,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,WAAW;MACxF,CAAC,+BAA+B,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW;MAC/E,CAAC,gCAAgC,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW;KACjF,CAAC;IAEF,MAAM,SAAS,GAAe;MAC5B,IAAI,EAAE,IAAI;MACV,CAAC,6BAA6B,GAAG,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW;MAClG,CAAC,4BAA4B,GAAG,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW;KACnG,CAAC;IAEF,MAAM,IAAI,IACR,WAAK,KAAK,EAAE,SAAS,IACnB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,CAAC;IAEF,MAAM,MAAM,IACV,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,IACjG,WAAK,KAAK,EAAE,WAAW,IACpB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,EAC5D,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,GAAG,IAAI,GAAG,EAAE,CAC1D,CACJ,CACL,CAAC;IAEF,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,IAC1D,MAAM,CACF,CACF,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/patternlib-textlink/patternlib-textlink.scss?tag=patternlib-textlink&encapsulation=shadow","./src/components/patternlib-textlink/patternlib-textlink.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.textlink {\n  display: inline-block;\n  box-sizing: border-box;\n  -moz-user-select: none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  font-family: var(--copytext-font-family);\n  font-weight: 700;\n  line-height: 1.1;\n  letter-spacing: var(--letter-spacing-basic);\n  margin: 0;\n  padding: 0;\n\n  &.uppercase {\n    text-transform: uppercase;\n  }\n\n  &.bold {\n    @apply font-text-bold;\n  }\n  &.disabled {\n    @apply pointer-events-none;\n  }\n  &.big {\n    font-size: var(--textlink-text-size-default);\n  }\n  &.small {\n    font-size: var(--textlink-text-size-small);\n  }\n\n  & .textlink-content-wrapper-icon-and-label {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n\n  & .textlink-content-wrapper-icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  & .textlink-icon-padding-right {\n    padding-right: 8px;\n  }\n\n  & .textlink-icon-padding-left {\n    padding-left: 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &.light {\n    & a {\n      color: var(--color-steel-800);\n      text-decoration: none;\n    }\n\n    & .icon * {\n      color: var(--color-steel-800) !important;\n    }\n\n    & .textlink-content-wrapper-label {\n      padding-bottom: 4px;\n      border-bottom: 2px solid;\n      border-color: var(--color-steel-800);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &:hover a {\n      color: var(--color-steel-600);\n    }\n\n    &:hover .textlink-content-wrapper-label {\n      border-color: var(--color-steel-600);\n    }\n\n    &:hover .icon * {\n      color: var(--color-steel-600) !important;\n    }\n\n    &.disabled a {\n      @apply text-gray-400;\n    }\n\n    &.disabled .textlink-content-wrapper-label {\n      @apply border-gray-400;\n    }\n\n    &.disabled .icon * {\n      color: var(--color-steel-400) !important;\n    }\n\n    &:active a {\n      color: var(--color-black);\n    }\n\n    &:active .textlink-content-wrapper-label {\n      border-color: var(--color-black);\n    }\n\n    &:active .icon * {\n      color: var(--color-black) !important;\n    }\n  }\n\n  &.dark {\n    & a {\n      color: var(--color-white);\n      text-decoration: none;\n    }\n\n    & .icon * {\n      color: var(--color-white) !important;\n    }\n\n    & .textlink-content-wrapper-label {\n      padding-bottom: 4px;\n      border-bottom: 2px solid;\n      border-color: var(--color-white);\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &:hover a {\n      color: var(--color-steel-600);\n    }\n\n    &:hover .textlink-content-wrapper-label {\n      border-color: var(--color-steel-600);\n    }\n\n    &:hover .icon * {\n      color: var(--color-steel-600) !important;\n    }\n\n    &.disabled a {\n      @apply text-gray-500;\n    }\n\n    &.disabled .textlink-content-wrapper-label {\n      @apply border-gray-500;\n    }\n\n    &.disabled .icon * {\n      color: var(--color-steel-500) !important;\n    }\n\n    &:active a {\n      color: var(--color-white);\n    }\n\n    &:active .textlink-content-wrapper-label {\n      border-color: var(--color-white);\n    }\n\n    &:active .icon * {\n      color: var(--color-white) !important;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { ClassNames } from '../../utils/interfaces';\n\nexport type Target = 'blank' | 'parent' | 'self' | 'top';\nexport type TargetPrefixed = '_blank' | '_parent' | '_self' | '_top';\n\n@Component({\n  tag: 'patternlib-textlink',\n  styleUrl: 'patternlib-textlink.scss',\n  shadow: true,\n})\nexport class PatternlibTextlink {\n  private hasIconSlot: boolean;\n  private hasLabel: boolean;\n\n  @Element() hostElement: HTMLPatternlibTextlinkElement;\n\n  /**\n   * Set the Textlink label.\n   */\n  @Prop() label = '';\n\n  /**\n   * Define the Textlink width.\n   */\n  @Prop() width = 'auto';\n\n  /**\n   * Set a hyperlink.\n   */\n  @Prop() href = '';\n\n  /**\n   * Define the Textlink size.\n   */\n  @Prop() size: 'big' | 'small' = 'big';\n\n  /**\n   * Define the target of the hyperlink. If no underscore prefix is provided it will be added automatically.\n   */\n  @Prop() target: Target | TargetPrefixed = 'blank';\n\n  /**\n   * Set the variant of the Textlink.\n   */\n  @Prop() variant: 'dark' | 'light' = 'light';\n  /**\n   * Set the icon position.\n   */\n  @Prop() iconPosition: 'left' | 'right' = 'left';\n\n  /**\n   * Define if the text is to be rendered uppercase.\n   */\n  @Prop() uppercase = true;\n\n  /**\n   * Define if the text is to be rendered bold.\n   */\n  @Prop() bold = true;\n\n  /**\n   * Disable the Textlink.\n   */\n  @Prop() disabled = false;\n\n  componentWillLoad(): void {\n    this.hasIconSlot = this.hostElement.querySelector('[slot=\"icon\"]') !== null;\n    this.hasLabel = this.label != undefined && this.label != '';\n  }\n\n  componentWillUpdate(): void {\n    this.hasLabel = this.label != undefined && this.label != '';\n  }\n\n  private getFormattedTarget(target: Target | TargetPrefixed): TargetPrefixed {\n    const targetPrefix = target[0];\n    if (targetPrefix !== '_') {\n      return `_${target}` as TargetPrefixed;\n    }\n    return target as TargetPrefixed;\n  }\n\n  render() {\n    const textLinkClass: ClassNames = {\n      textlink: true,\n      [this.size]: true,\n      [this.variant]: true,\n      [this.hasIconSlot ? 'withicon' : 'textonly']: true,\n      uppercase: this.uppercase,\n      bold: this.bold,\n      disabled: this.disabled,\n    };\n\n    const layoutClass: ClassNames = {\n      [`textlink-content-wrapper-icon-and-label`]: this.label != undefined && this.hasIconSlot,\n      [`textlink-content-wrapper-icon`]: this.label === undefined && this.hasIconSlot,\n      [`textlink-content-wrapper-label`]: this.label != undefined && !this.hasIconSlot,\n    };\n\n    const iconClass: ClassNames = {\n      icon: true,\n      [`textlink-icon-padding-right`]: this.iconPosition === 'left' && this.hasLabel && this.hasIconSlot,\n      [`textlink-icon-padding-left`]: this.iconPosition === 'right' && this.hasLabel && this.hasIconSlot,\n    };\n\n    const icon = (\n      <div class={iconClass}>\n        <slot name=\"icon\" />\n      </div>\n    );\n\n    const layout = (\n      <a href={this.href != '' ? `${this.href}` : undefined} target={this.getFormattedTarget(this.target)}>\n        <div class={layoutClass}>\n          {this.hasIconSlot && this.iconPosition === 'left' ? icon : ''}\n          {this.label}\n          {this.hasIconSlot && this.iconPosition === 'right' ? icon : ''}\n        </div>\n      </a>\n    );\n\n    return (\n      <Host>\n        <span class={textLinkClass} style={{ width: `${this.width}` }}>\n          {layout}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}