{"version":3,"names":["scTagCss","ScTagStyle0","ScTag","handleClearClick","this","scClear","emit","render","Tag","clearable","h","key","part","onClick","class","tag","type","size","pill","ariaLabel","xmlns","width","height","fill","viewBox","d"],"sources":["src/components/ui/tag/sc-tag.scss?tag=sc-tag&encapsulation=shadow","src/components/ui/tag/sc-tag.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: none;\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: var(--sc-font-weight-bold);\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--primary {\n  background-color: var(--sc-tag-primary-background-color, var(--sc-color-primary-500));\n  border-color: var(--sc-tag-primary-border-color, var(--sc-color-primary-500));\n  color: var(--sc-tag-primary-color, var(--sc-color-primary-text, var(--sc-color-white)));\n}\n\n.tag--success {\n  background-color: var(--sc-tag-success-background-color, var(--sc-color-success-100));\n  border-color: var(--sc-tag-success-border-color, var(--sc-color-success-200));\n  color: var(--sc-tag-success-color, var(--sc-color-success-800));\n}\n\n.tag--info {\n  background-color: var(--sc-color-info-100);\n  border-color: var(--sc-color-info-200);\n  color: var(--sc-color-info-700);\n}\n\n.tag--default {\n  background-color: var(--sc-tag-default-background-color, var(--sc-color-gray-100));\n  border-color: var(--sc-tag-default-border-color, var(--sc-color-gray-200));\n  color: var(--sc-tag-default-color, var(--sc-color-gray-700));\n}\n\n.tag--warning {\n  background-color: var(--sc-color-warning-100);\n  border-color: var(--sc-color-warning-200);\n  color: var(--sc-color-warning-700);\n}\n\n.tag--danger {\n  background-color: var(--sc-color-danger-100);\n  border-color: var(--sc-color-danger-200);\n  color: var(--sc-color-danger-700);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n  font-size: var(--sc-button-font-size-small);\n  height: calc(var(--sc-input-height-small) * 0.75);\n  line-height: calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2);\n  border-radius: var(--sc-input-border-radius-small);\n  padding: 0 var(--sc-spacing-x-small);\n\n  .tag__clear {\n    margin-left: var(--sc-spacing-xx-small);\n    margin-right: calc(-1 * var(--sc-spacing-xxx-small));\n  }\n}\n\n.tag--medium {\n  font-size: var(--sc-font-size-small);\n  height: calc(var(--sc-input-height-medium) * 0.75);\n  line-height: calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2);\n  border-radius: var(--sc-input-border-radius-medium);\n  padding: 0 var(--sc-spacing-small);\n\n  .tag__clear {\n    margin-left: var(--sc-spacing-xx-small);\n    margin-right: calc(-1 * var(--sc-spacing-xx-small));\n  }\n}\n\n.tag--large {\n  font-size: var(--sc-button-font-size-large);\n  height: calc(var(--sc-input-height-large) * 0.75);\n  line-height: calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2);\n  border-radius: var(--sc-input-border-radius-large);\n  padding: 0 var(--sc-spacing-medium);\n\n  .tag__clear {\n    margin-left: var(--sc-spacing-xx-small);\n    margin-right: calc(-1 * var(--sc-spacing-x-small));\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n  border-radius: var(--sc-border-radius-pill);\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sc-tag',\n  styleUrl: 'sc-tag.scss',\n  shadow: true,\n})\nexport class ScTag {\n  @Event() scClear: EventEmitter<ScTag>;\n\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'default' = 'default';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill: boolean = false;\n\n  /** Makes the tag clearable. */\n  @Prop() clearable: boolean = false;\n\n  /** Aria label */\n  @Prop() ariaLabel: string;\n\n  handleClearClick() {\n    this.scClear.emit(this);\n  }\n\n  render() {\n    const Tag = this.clearable ? 'button' : 'span';\n\n    return (\n      <Tag\n        part=\"base\"\n        onClick={() => this.handleClearClick()}\n        class={{\n          'tag': true,\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--default': this.type === 'default',\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clearable': this.clearable,\n        }}\n        aria-label={this.ariaLabel}\n      >\n        <span part=\"content\" class=\"tag__content\">\n          <slot></slot>\n        </span>\n        {!!this.clearable && (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x\" viewBox=\"0 0 16 16\">\n            <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"></path>\n          </svg>\n        )}\n      </Tag>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,ihFACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,oEAImF,U,UAGrC,S,UAGrB,M,eAGZ,M,yBAK7B,gBAAAC,GACEC,KAAKC,QAAQC,KAAKF,K,CAGpB,MAAAG,GACE,MAAMC,EAAMJ,KAAKK,UAAY,SAAW,OAExC,OACEC,EAACF,EAAG,CAAAG,IAAA,2CACFC,KAAK,OACLC,QAAS,IAAMT,KAAKD,mBACpBW,MAAO,CACLC,IAAO,KAEP,eAAgBX,KAAKY,OAAS,UAC9B,eAAgBZ,KAAKY,OAAS,UAC9B,YAAaZ,KAAKY,OAAS,OAC3B,eAAgBZ,KAAKY,OAAS,UAC9B,cAAeZ,KAAKY,OAAS,SAC7B,eAAgBZ,KAAKY,OAAS,UAE9B,aAAcZ,KAAKa,OAAS,QAC5B,cAAeb,KAAKa,OAAS,SAC7B,aAAcb,KAAKa,OAAS,QAE5B,YAAab,KAAKc,KAClB,iBAAkBd,KAAKK,WACxB,aACWL,KAAKe,WAEjBT,EAAA,QAAAC,IAAA,2CAAMC,KAAK,UAAUE,MAAM,gBACzBJ,EAAA,QAAAC,IAAA,gDAECP,KAAKK,WACNC,EAAA,OAAAC,IAAA,2CAAKS,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,KAAK,eAAeT,MAAM,UAAUU,QAAQ,aACzGd,EAAA,QAAAC,IAAA,2CAAMc,EAAE,qM","ignoreList":[]}