@patternfly/elements
Version:
PatternFly Elements
1 lines • 10 kB
Source Map (JSON)
{"version":3,"file":"pf-label.js","sourceRoot":"","sources":["pf-label.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;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,6CAA6C,CAAC;;;AAIrD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC;QACE,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,CAAC;CACF;AAmEM,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;;QAQL;;;;WAIG;QACS,YAAO,GAEH,QAAQ,CAAC;QAEzB;;WAEG;QACS,UAAK,GAQJ,MAAM,CAAC;QAKpB,2CAA2C;QACd,YAAO,GAAG,KAAK,CAAC;QAE7C,yDAAyD;QAC5B,cAAS,GAAG,KAAK,CAAC;QAE/C,6CAA6C;QAChB,cAAS,GAAG,KAAK,CAAC;QAK/C,2DAA2D;QAC3D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAC;;IAEvC,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACpC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACtC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,IAAI,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACzD,OAAO,IAAI,CAAA;;qBAEM,QAAQ,CAAC;YAChB,OAAO;YACP,OAAO;YACP,SAAS;YACT,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO;YAC1B,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK;SAAE,CAAC;;8BAET,CAAC,IAAI;;4BAEP,IAAI,CAAC,IAAI,IAAI,SAA8B;;;4CAG3B,CAAC,IAAI,CAAC,SAAS;;+BAE5B,uBAAA,IAAI,iDAAc;8BACnB,IAAI,CAAC,gBAAgB,IAAI,QAAQ;;;;;;;KAO1D,CAAC;IACJ,CAAC;;;;;IAGC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,EAAE,CAAC,EAAE,CAAC;QAChE,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;AACH,CAAC;AAlFe,cAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;AAE1B,yBAAiB,GAAmB;IAC3D,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;;AAOU;IAAX,QAAQ,EAAE;wCAEc;AAKb;IAAX,QAAQ,EAAE;sCAQS;AAGR;IAAX,QAAQ,EAAE;qCAAe;AAGG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAiB;AAGhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGlB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAmB;AAGA;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;iDAA2B;AA3C9D,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';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-label.css';\n\nexport class LabelCloseEvent extends Event {\n constructor() {\n super('close', { bubbles: true, cancelable: true });\n }\n}\n\n/**\n * The **label** component allows users to add specific element captions for user\n * clarity and convenience.\n * @summary Allows users to display meta data in a stylized form.\n * @fires {LabelCloseEvent} close - when a removable label's close button is clicked\n * @cssprop {<length>} [--pf-c-label--FontSize=0.875em]\n * @cssprop {<length>} [--pf-c-label--PaddingTop=0.25rem]\n * @cssprop {<length>} [--pf-c-label--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-label--PaddingBottom=0.25rem]\n * @cssprop {<length>} [--pf-c-label--PaddingLeft=0.5rem]\n * @cssprop {<color>} [--pf-c-label--Color=#151515]\n * @cssprop {<color>} [--pf-c-label--BackgroundColor=#f5f5f5]\n * @cssprop {<length>} [--pf-c-label--BorderRadius=30em]\n * @cssprop {<length>} [--pf-c-label__content--MaxWidth=100]\n * @cssprop {<color>} [--pf-c-label__content--Color=#151515]\n * @cssprop {<length>} [--pf-c-label__content--before--BorderWidth=1px]\n * @cssprop {<color>} [--pf-c-label__content--before--BorderColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-label--m-outline__content--Color=#151515]\n * @cssprop {<color>} [--pf-c-label--m-outline--BackgroundColor=#ffffff]\n * @cssprop {<color>} [--pf-c-label--m-blue__content--Color=#002952]\n * @cssprop {<color>} [--pf-c-label--m-blue--BackgroundColor=#e7f1fa]\n * @cssprop {<color>} [--pf-c-label--m-blue__content--before--BorderColor=#bee1f4]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-blue__content--Color=#06c]\n * @cssprop {<color>} [--pf-c-label--m-cyan__content--Color=#3b1f00]\n * @cssprop {<color>} [--pf-c-label--m-cyan--BackgroundColor=#f2f9f9]\n * @cssprop {<color>} [--pf-c-label--m-cyan__content--before--BorderColor=#a2d9d9]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-cyan__content--Color=#005f60]\n * @cssprop {<color>} [--pf-c-label--m-green__content--Color=#1e4f18]\n * @cssprop {<color>} [--pf-c-label--m-green--BackgroundColor=#f3faf2]\n * @cssprop {<color>} [--pf-c-label--m-green__content--before--BorderColor=#bde5b8]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-green__content--Color=#3e8635]\n * @cssprop {<color>} [--pf-c-label--m-orange__content--Color=#003737]\n * @cssprop {<color>} [--pf-c-label--m-orange--BackgroundColor=#fff6ec]\n * @cssprop {<color>} [--pf-c-label--m-orange__content--before--BorderColor=#f4b678]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-orange__content--Color=#8f4700]\n * @cssprop {<color>} [--pf-c-label--m-purple__content--Color=#1f0066]\n * @cssprop {<color>} [--pf-c-label--m-purple--BackgroundColor=#f2f0fc]\n * @cssprop {<color>} [--pf-c-label--m-purple__content--before--BorderColor=#cbc1ff]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-purple__content--Color=#6753ac]\n * @cssprop {<color>} [--pf-c-label--m-red__content--Color=#7d1007]\n * @cssprop {<color>} [--pf-c-label--m-red--BackgroundColor=#faeae8]\n * @cssprop {<color>} [--pf-c-label--m-red__content--before--BorderColor=#c9190b]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-red__content--Color=#c9190b]\n * @cssprop {<color>} [--pf-c-label--m-gold__content--Color=#3d2c00]\n * @cssprop {<color>} [--pf-c-label--m-gold--BackgroundColor=#fdf7e7]\n * @cssprop {<color>} [--pf-c-label--m-gold__content--before--BorderColor=#f9e0a2]\n * @cssprop {<color>} [--pf-c-label--m-outline--m-gold__content--Color=#795600]\n * @cssprop {<color>} [--pf-c-label--m-blue__icon--Color=#06c]\n * @cssprop {<color>} [--pf-c-label--m-cyan__icon--Color=#009596]\n * @cssprop {<color>} [--pf-c-label--m-green__icon--Color=#3e8635]\n * @cssprop {<color>} [--pf-c-label--m-orange__icon--Color=#ec7a08]\n * @cssprop {<color>} [--pf-c-label--m-red__icon--Color=#c9190b]\n * @cssprop {<color>} [--pf-c-label--m-gold__icon--Color=#f0ab00]\n * @csspart icon - container for the label icon\n * @csspart close-button - container for removable labels' close button\n * @slot icon\n * Contains the labels's icon, e.g. web-icon-alert-success.\n * @slot\n * Must contain the text for the label.\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingTop=0]\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingBottom=0]\n * @cssprop {<length>} [--pf-c-label--m-compact--PaddingLeft=0.5rem]\n */\n@customElement('pf-label')\nexport class PfLabel extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n static override readonly shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Changes the style of the label.\n * - Filled: Colored background with colored border.\n * - Outline: White background with colored border.\n */\n @property() variant:\n | 'filled'\n | 'outline' = 'filled';\n\n /**\n * Changes the color of the label\n */\n @property() color:\n | 'blue'\n | 'cyan'\n | 'green'\n | 'orange'\n | 'purple'\n | 'red'\n | 'grey'\n | 'gold' = 'grey';\n\n /** Shorthand for the `icon` slot, the value is icon name */\n @property() icon?: string;\n\n /** Flag indicating the label is compact */\n @property({ type: Boolean }) compact = false;\n\n /** Flag indicating the label text should be truncated */\n @property({ type: Boolean }) truncated = false;\n\n /** Flag indicating the label is removable */\n @property({ type: Boolean }) removable = false;\n\n /** Text label for a removable label's close button */\n @property({ attribute: 'close-button-label' }) closeButtonLabel?: string;\n\n /** Represents the state of the anonymous and icon slots */\n #slots = new SlotController(this, null, 'icon');\n\n override render(): TemplateResult<1> {\n const { compact, truncated } = this;\n const { variant, color, icon } = this;\n const hasIcon = !!icon || this.#slots.hasSlotted('icon');\n return html`\n <span id=\"container\"\n class=\"${classMap({\n hasIcon,\n compact,\n truncated,\n [variant ?? '']: !!variant,\n [color ?? '']: !!color })}\">\n <slot name=\"icon\" part=\"icon\">\n <pf-icon ?hidden=\"${!icon}\"\n size=\"sm\"\n .icon=\"${this.icon || undefined as unknown as string}\"></pf-icon>\n </slot>\n <slot id=\"text\"></slot>\n <span part=\"close-button\" ?hidden=${!this.removable}>\n <pf-button plain\n @click=\"${this.#onClickClose}\"\n label=\"${this.closeButtonLabel ?? 'remove'}\">\n <svg viewBox=\"0 0 352 512\">\n <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n </svg>\n </pf-button>\n </span>\n </span>\n `;\n }\n\n #onClickClose() {\n if (this.removable && this.dispatchEvent(new LabelCloseEvent())) {\n this.remove();\n }\n }\n}\n\nexport type LabelVariant = PfLabel['variant'];\n\nexport type LabelColor = PfLabel['color'];\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-label': PfLabel;\n }\n}\n"]}