{"version":3,"sources":["src/components/ads-tag/ads-tag.scss?tag=ads-tag&encapsulation=shadow","src/components/ads-tag/ads-tag.tsx"],"names":["adsTagCss","AdsTag","[object Object]","hostRef","this","isClickable","el","setAttribute","identifier","generateId","component","newValue","Pipeline.addComponent","Pipeline.removeComponent","TagType","isNullOrUndefinedOrEmpty","href","attributes","tabindex","srLabel","Object","assign","aria-label","h","class","text"],"mappings":"gKAAA,MAAMA,EAAY,u7GCmBLC,EAAM,MAMjBC,YAAAC,aAiCyBC,KAAAC,YAAc,MAhCrCD,KAAKE,GAAGC,aAAa,KAAMH,KAAKI,YAAcC,EAAW,YACzDL,KAAKM,UAAY,UA4CnBR,uBAAuBS,GACrBP,KAAKE,GAAGC,aAAa,KAAMI,GAAYF,EAAW,YAG1CP,mBACRU,EAAsBR,KAAKE,IAGnBJ,uBACRW,EAAyBT,KAAKE,IAGtBJ,SACR,MAAMY,GAAWC,EAAyBX,KAAKY,MAAQ,IAAM,SAC7D,IAAIC,EAAaH,IAAY,IAAM,CAAEE,KAAMZ,KAAKY,KAAME,SAAU,GAAM,GACtED,GAAcF,EAAyBX,KAAKe,SAAQC,OAAAC,OAAAD,OAAAC,OAAA,GAAQJ,GAAe,CAAEK,aAAclB,KAAKe,UAAcF,EAE9G,OACEM,EAACT,EAAOM,OAAAC,OAAA,GAAKJ,EAAU,CAAEO,MAAO,UAAUT,EAAyBX,KAAKY,OAASZ,KAAKC,YAAc,eAAiB,QACjHU,EAAyBX,KAAKqB,MAAQrB,KAAKqB,KAAOF,EAAA,OAAA","sourcesContent":["@import 'core';\n\n/**\n * @prop --ads-tag-background-color: The background color for ads-tag\n * @prop --ads-tag-background-color-active: The background color for ads-tag on active\n * @prop --ads-tag-background-color-focus: The background color for ads-tag on focus\n * @prop --ads-tag-background-color-hover: The background color for ads-tag on hover\n *\n * @prop --ads-tag-border-color: The border color for ads-tag\n * @prop --ads-tag-border-color-active: The border color for ads-tag on active\n * @prop --ads-tag-border-color-focus: The border color for ads-tag on focus\n * @prop --ads-tag-border-color-hover: The border color for ads-tag on hover\n *\n * @prop --ads-tag-color: The border color for ads-tag\n * @prop --ads-tag-color-active: The border color for ads-tag on active\n * @prop --ads-tag-color-focus: The border color for ads-tag on focus\n * @prop --ads-tag-color-hover: The border color for ads-tag on hover\n */\n\n:host {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  vertical-align: middle;\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-tag-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-tag-dark;\n}\n\n.c-tag {\n  @include ads-tag;\n  font-size: 14px;\n  margin: 0;\n}\n","import { Component, Element, Prop, VNode, Watch, h } from '@stencil/core';\n\nimport * as Pipeline from '../core/utils/pipeline';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId } from '../core/utils/components';\nimport { isNullOrUndefinedOrEmpty } from 'utils/collection';\n\n/**\n * Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them. Multiple or single tags can be used to categorize items.\n * @tag `<ads-tag>`\n * @slot - Content rendered as rich text inside the component\n * @example <ads-tag text=\"Hello world\"></ads-tag>\n */\n@Component({\n  tag: 'ads-tag',\n  styleUrl: 'ads-tag.scss',\n  shadow: true,\n})\nexport class AdsTag implements BaseComponent {\n  /**\n   * @hidden\n   */\n  public component: string;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-tag'));\n    this.component = 'ads-tag';\n  }\n\n  @Element() private el: HTMLAdsTagElement;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * Contains a URL (fragment).\n   * If this property is set, an anchor tag will be rendered. (optional)\n   */\n  @Prop({ reflect: true }) href?: string;\n\n  /**\n   * Text to display as the aria-label (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  /**\n   * Specifies whether the tag is clickable or not (optional)\n   * @default false\n   */\n  @Prop({ reflect: true }) isClickable = false;\n\n  /**\n   * Specifies an initial value for the tag (optional)\n   */\n  @Prop({ reflect: true }) text?: string;\n\n  /**\n   * Handle identifier property changes\n   * @param {string} newValue The new value for \"identifier\"\n   * @hidden\n   */\n  @Watch('identifier')\n  handleIdentifierChange(newValue: string): void {\n    this.el.setAttribute('id', newValue || generateId('ads-tag'));\n  }\n\n  protected componentDidLoad(): void {\n    Pipeline.addComponent(this.el);\n  }\n\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n  }\n\n  protected render(): VNode {\n    const TagType = !isNullOrUndefinedOrEmpty(this.href) ? 'a' : 'button';\n    let attributes = TagType === 'a' ? { href: this.href, tabindex: 0 } : {};\n    attributes = !isNullOrUndefinedOrEmpty(this.srLabel) ? { ...attributes, ...{ 'aria-label': this.srLabel } } : attributes;\n\n    return (\n      <TagType {...attributes} class={`c-tag ${!isNullOrUndefinedOrEmpty(this.href) || this.isClickable ? 'is-clickable' : ''}`}>\n        {!isNullOrUndefinedOrEmpty(this.text) ? this.text : <slot />}\n      </TagType>\n    ) as VNode;\n  }\n}\n"]}