{"version":3,"names":["adsTagCss","AdsTag","constructor","hostRef","this","el","setAttribute","identifier","generateId","component","handleIdentifierChange","newValue","componentDidLoad","Pipeline.addComponent","disconnectedCallback","Pipeline.removeComponent","render","TagType","isNullOrUndefinedOrEmpty","href","attributes","tabindex","srLabel","Object","assign","h","class","isClickable","text"],"sources":["src/components/ads-tag/ads-tag.scss?tag=ads-tag&encapsulation=shadow","src/components/ads-tag/ads-tag.tsx"],"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"],"mappings":"gKAAA,MAAMA,EAAY,i7G,MCmBLC,EAAM,MAMjBC,YAAAC,G,qHAiCuC,M,oBAhCrCC,KAAKC,GAAGC,aAAa,KAAMF,KAAKG,YAAcC,EAAW,YACzDJ,KAAKK,UAAY,S,CA4CnBC,uBAAuBC,GACrBP,KAAKC,GAAGC,aAAa,KAAMK,GAAYH,EAAW,W,CAG1CI,mBACRC,EAAsBT,KAAKC,G,CAGnBS,uBACRC,EAAyBX,KAAKC,G,CAGtBW,SACR,MAAMC,GAAWC,EAAyBd,KAAKe,MAAQ,IAAM,SAC7D,IAAIC,EAAaH,IAAY,IAAM,CAAEE,KAAMf,KAAKe,KAAME,SAAU,GAAM,GACtED,GAAcF,EAAyBd,KAAKkB,SAAQC,OAAAC,OAAAD,OAAAC,OAAA,GAAQJ,GAAe,CAAE,aAAchB,KAAKkB,UAAcF,EAE9G,OACEK,EAACR,EAAOM,OAAAC,OAAA,GAAKJ,EAAU,CAAEM,MAAO,UAAUR,EAAyBd,KAAKe,OAASf,KAAKuB,YAAc,eAAiB,QACjHT,EAAyBd,KAAKwB,MAAQxB,KAAKwB,KAAOH,EAAA,a"}