@patternfly/elements
Version:
PatternFly Elements
1 lines • 3.25 kB
Source Map (JSON)
{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAuB/C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAuB5B,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAChD,MAAM,WAAW,GACb,CAAC,SAAS,IAAI,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,EAAE,GAAG;YAC5E,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACtC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;QACtB,OAAO,IAAI,CAAA;cACD,WAAW;KACpB,CAAC;IACJ,CAAC;;AA/Be,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAMtB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA2B;AAQZ;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAMhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AArBnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A **badge** is used to annotate other information like a label or an object name.\n * @cssprop {<length>} [--pf-c-badge--BorderRadius=180em]\n * @cssprop {<length>} [--pf-c-badge--MinWidth=2rem]\n * @cssprop {<length>} [--pf-c-badge--PaddingLeft=0.5rem]\n * @cssprop {<length>} [--pf-c-badge--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-badge--FontSize=0.85em]\n * @cssprop {<length>} [--pf-c-badge--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-badge--FontWeight=700]\n * @cssprop {<color>} [--pf-c-badge--Color=#151515]\n * @cssprop {<color>} [--pf-c-badge--BackgroundColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-badge--m-read--Color=#151515]\n * @cssprop {<color>} [--pf-c-badge--m-read--BackgroundColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-badge--m-unread--Color=#fff]\n * @cssprop {<color>} [--pf-c-badge--m-unread--BackgroundColor=#06c]\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n /**\n * Denotes the state-of-affairs this badge represents\n * Options include read and unread\n */\n @property({ reflect: true }) state?: 'unread' | 'read';\n\n /**\n * Sets a numeric value for a badge.\n *\n * You can pair it with `threshold` attribute to add a `+` sign\n * if the number exceeds the threshold value.\n */\n @property({ reflect: true, type: Number }) number?: number;\n\n /**\n * Sets a threshold for the numeric value and adds `+` sign if\n * the numeric value exceeds the threshold value.\n */\n @property({ reflect: true, type: Number }) threshold?: number;\n\n override render(): TemplateResult<1> {\n const { threshold, number, textContent } = this;\n const displayText =\n (threshold && number && (threshold < number)) ? `${threshold.toString()}+`\n : (number != null) ? number.toString()\n : textContent ?? '';\n return html`\n <span>${displayText}</span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-badge': PfBadge;\n }\n}\n"]}