@patternfly/elements
Version:
PatternFly Elements
1 lines • 5.29 kB
Source Map (JSON)
{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAC1C,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QADhB,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAsBM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;;QAML,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAKpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;;IAEzD,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAEhB,IAAI,CAAC,GAAG,IAAI,EAAE;iBACf,IAAI,CAAC,GAAG;oBACL,uBAAA,IAAI,6CAAQ;KAC3B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;KAOnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;;6CAEO,KAAY;IAClB,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;AACnD,CAAC;AAzCe,eAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAGtC;IAAX,QAAQ,EAAE;qCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAGX;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc;AAhB9C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-avatar.css';\n\nexport class PfAvatarLoadEvent extends Event {\n constructor(public originalEvent: Event) {\n super('load', { bubbles: true });\n }\n}\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n * @summary For displaying a user's avatar image\n * @fires {PfAvatarLoadEvent} load - when the avatar loads\n * @cssprop [--pf-c-avatar--Width=24px]\n * @cssprop [--pf-c-avatar--Height=24px]\n * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]\n * @cssprop [--pf-c-avatar--BorderWidth=0]\n * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]\n * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]\n * @cssprop [--pf-c-avatar--m-sm--Width=24px]\n * @cssprop [--pf-c-avatar--m-sm--Height=24px]\n * @cssprop [--pf-c-avatar--m-md--Width=36px]\n * @cssprop [--pf-c-avatar--m-md--Height=36px]\n * @cssprop [--pf-c-avatar--m-lg--Width=72px]\n * @cssprop [--pf-c-avatar--m-lg--Height=72px]\n * @cssprop [--pf-c-avatar--m-xl--Width=28px]\n * @cssprop [--pf-c-avatar--m-xl--Height=28px]\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** The URL to the user's custom avatar image. */\n @property() src?: string;\n\n /** The alt text for the avatar image. */\n @property({ reflect: true }) alt?: string = 'Avatar image';\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /** Whether to display a border around the avatar */\n @property({ reflect: true }) border?: 'light' | 'dark';\n\n /** Whether or not the Avatar image is dark */\n @property({ type: Boolean, reflect: true }) dark = false;\n\n render(): TemplateResult<1> {\n return this.src != null ? html`\n <img id=\"img\"\n alt=\"${this.alt ?? ''}\"\n src=${this.src}\n @load=\"${this.#onLoad}\">\n ` : this.dark ? html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n style=\"enable-background:new 0 0 36 36\"\n viewBox=\"0 0 36 36\">\n <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n </svg>\n ` : html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n </svg>\n `;\n }\n\n #onLoad(event: Event) {\n this.dispatchEvent(new PfAvatarLoadEvent(event));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-avatar': PfAvatar;\n }\n}\n"]}