{"version":3,"sources":["../src/elements/badge.ts","../src/styles/elements/badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/badge';\nimport { EnumRoundedSizes, EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ reflect: true })\n  status: TypeStatus = EnumStatuses.Primary;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  render() {\n    return html`\n      <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.CIRCLE) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-badge-padding: 10px;\n    --kemet-badge-color: rgb(var(--kemet-color-white));\n    --kemet-badge-background-color: rgb(var(--kemet-color-primary));\n    --kemet-badge-border: 0;\n    --kemet-badge-border-width: 1px;\n    --kemet-badge-border-style: solid;\n    --kemet-badge-border-color: rgb(var(--kemet-color-primary));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--kemet-badge-padding);\n    line-height: 1;\n    color: var(--kemet-badge-color);\n    background-color: var(--kemet-badge-background-color);\n    border: var(--kemet-badge-border);\n  }\n\n  :host([status='primary']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([status='success']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([status='standard']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-gray-500));\n  }\n\n  :host([status='warning']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([status='error']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-error));\n  }\n\n  :host([rounded]) {\n    border-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) {\n    border-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=md]) {\n    border-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=lg]) {\n    border-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) {\n    border-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) {\n    border-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) {\n    border-radius: var(--kemet-border-radius-pill);\n  }\n\n  :host([outlined]) {\n    --kemet-badge-color: rgb(var(--kemet-color-foreground));\n    --kemet-badge-background-color: transparent;\n    --kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--kemet-badge-border-color);\n  }\n\n  :host([outlined][status=primary]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([outlined][status=success]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([outlined][status=warning]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([outlined][status=error]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-error));\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;;;ACD/C,SAAS,WAAW;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADqB1B,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE;AAGA,yBAAwB;AAMxB,oBAAoB;AAGpB,oBAAoB;AAGpB,qBAAqB;AAAA;AAAA,EAErB,SAAS;AACP,WAAO;AAAA,sCAC2B,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC3D,KAAK,WAAW,eAAe,EAAE;AAAA,0BACf,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC/C,KAAK,YAAY,eAAe,EAAE;AAAA,uCACH,MAAM,KAAK,kBAAkB,CAAC;AAAA;AAAA,EAEnE;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,mCAAqC;AAC5C,WAAK,MAAM,SAAS,GAAG,KAAK,cAAc,KAAK,aAAa;AAC5D,WAAK,MAAM,QAAQ,GAAG,KAAK,cAAc,KAAK,aAAa;AAAA,IAC7D;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,UAAM,OAAO,KAAK,cAAc,eAAe;AAC/C,QAAI,KAAM,MAAK,WAAW;AAAA,EAC5B;AAAA,EAEA,oBAAoB;AAClB,UAAM,QAAQ,KAAK,cAAc,gBAAgB;AACjD,QAAI,MAAO,MAAK,YAAY;AAAA,EAC9B;AACF;AA/CqB,WACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAHR,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB,CAAC;AAAA,GANpC,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,WAanB;AAGA;AAAA,EADC,MAAM;AAAA,GAfY,WAgBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAlBY,WAmBnB;AAnBmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}