{"_id":"@bliss-design-system/avatar","_rev":"8-b07e9eb719e37c3d1b97d112a94f3d5f","name":"@bliss-design-system/avatar","dist-tags":{"beta":"1.0.0-beta.0","latest":"1.1.1","alpha":"1.0.1-alpha.0"},"versions":{"1.0.0-beta.0":{"name":"@bliss-design-system/avatar","version":"1.0.0-beta.0","description":"Representation of a user account or user group","repository":{"type":"git","url":"git+https://gitlab.com/bliss-design-system/components.git","directory":"packages/avatar"},"publishConfig":{"access":"public"},"license":"MIT","type":"module","main":"./index.js","module":"./index.js","types":"./index.d.ts","exports":{".":"./src/index.js","./src/*":"./src/*","./package.json":"./package.json","./icon":"./src/index.js","./icon.js":"./src/index.js"},"scripts":{"test":"echo 'Error: tests should be run from the component toolkit root.' && exit 1"},"dependencies":{"lit-element":"^2.4.0","lit-html":"^1.3.0"},"peerDependencies":{"@bliss-design-system/tokens":"^1.4.0"},"bugs":{"url":"https://gitlab.com/bliss-design-system/components/issues"},"homepage":"https://gitlab.com/bliss-design-system/components#readme","_id":"@bliss-design-system/avatar@1.0.0-beta.0","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-K90ySqM//y3OfDMeguNsbjBe3bU5MT8jwi2DdCO3nISU5+A4Vlcx8MVoBq9eDKAyYrTgpa4I1eWDnIAACr9rLQ==","shasum":"e3d8b952e88b5291e124ac3ffa2cc68178ffabfa","tarball":"https://registry.npmjs.org/@bliss-design-system/avatar/-/avatar-1.0.0-beta.0.tgz","fileCount":21,"unpackedSize":17804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdWroCRA9TVsSAnZWagAAn8gP/jUpRWRsIy2k/YHmclZM\nWTO9PN77FCh/pEucovwTH2H4pzVEd6yZB7pkb0oagiy+0rDIptbpjB/zNXwO\nuKfxknfaAEr3BwSqhK4D/zBlz88rmbU2Dh1XJPCDYVaYhJWm3bPntcIgaPix\nMKJys57qhBOv29gnkbDzvD2LR5M6bGMrlIcKBTyEq4dntt+JTcDW8cCNtaQW\nFL82eE7YA2EID2kspd9bDbYDDyDL9yailWdqWKFIUhPExGsXy8br9jYLb3Oo\nEtAH7T2zZ9b6nWk8PgapnoDueATmIdl/9zzJcaP/0fK/0BenU/kRb4vY7w1l\nbdXavDNd8NwQTlPWHlgac38/ixfxfiMumT74x4sBjVNWisJR7h13GHTAX6Ji\nHC1ceCoaoUlNtEaezJZ5WLWeMdEzhr7vhSEeK2gLMPkyDPYQrLngA8Lj5SJI\nvrDIjzlIf3clrYx9ThpKxs20Q3onoFYAWzQYBLlYiI+ivoi1rWvXz8p7sWY3\nAfmbPU3QZqtf7fDLBRSaUgb/u03/fUgEtu5w1TwH3jyf+VL0t+2YbD3HwINn\nEk97QNBBBu1YeO0h5Iz6I1RUe55PJJ7C/KNmfzJe7k7C1GTYhcwfwFpTObV8\nBlzY1AFRasT/7W9OaDASM8MpzgUl1AhuRFol/vn4C0EPssxmvxgDxsrJOPdc\nbaUj\r\n=QiEG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCeUDZS8jt+72lMInx3Q7YV/T6x9YKaF1CX7qj1t7jTQIgdUtkyQqqdU3q8zCwzroVqZiW70uEKp8QXO4h/Q1sU3k="}]},"_npmUser":{"name":"bryter-bliss","email":"bliss@bryter.io"},"directories":{},"maintainers":[{"name":"carolstran","email":"hello@workwithcarolyn.com"},{"name":"gvonkoss","email":"gabrielle@gvonkoss.com"},{"name":"coolcut","email":"jan@fruechtl.me"},{"name":"bryter-bliss","email":"bliss@bryter.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avatar_1.0.0-beta.0_1618307815596_0.978739527907692"},"_hasShrinkwrap":false},"1.0.0":{"name":"@bliss-design-system/avatar","version":"1.0.0","description":"Representation of a user account or user group","repository":{"type":"git","url":"git+https://gitlab.com/bliss-design-system/components.git","directory":"packages/avatar"},"publishConfig":{"access":"public"},"license":"MIT","type":"module","main":"./index.js","module":"./index.js","types":"./index.d.ts","exports":{".":"./src/index.js","./src/*":"./src/*","./package.json":"./package.json","./icon":"./src/index.js","./icon.js":"./src/index.js"},"scripts":{"test":"echo 'Error: tests should be run from the component toolkit root.' && exit 1"},"dependencies":{"lit-element":"^2.4.0","lit-html":"^1.3.0"},"peerDependencies":{"@bliss-design-system/tokens":"^1.4.0"},"bugs":{"url":"https://gitlab.com/bliss-design-system/components/issues"},"homepage":"https://gitlab.com/bliss-design-system/components#readme","_id":"@bliss-design-system/avatar@1.0.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-S++jqS09+kZvTOvF9z4QpMxz9KGrDfvpXiZlFEehx2SzxoJogcS+vSvSxj+rWcGgyHsS8tjlYjR17NxHPs1YUQ==","shasum":"7a13f100be18f67e84e40de290b330531dcf7996","tarball":"https://registry.npmjs.org/@bliss-design-system/avatar/-/avatar-1.0.0.tgz","fileCount":21,"unpackedSize":20757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkQQiCRA9TVsSAnZWagAAlcgP/1h8F+hlO2gT0zmAXRRJ\nrSEdwfXnF3iIhh7VjWkHD/oJOviOdFh/ebqUEX7QQZaH0UOGRwaWjQGlRIsB\nmpA5Qu5s1fnSWTnsinAZoo374LQ7LOhqh5A11/w8EycvptT5KSvaASJRXk99\nTLXFsOIYy34wzJwgq8JM5/MYK0whKW0y2uzXHbgJSEYBjrbqvzIPt4ekj5o/\niLK66w5RnpH5oTlcXYQ8+6EySm2a88EjsdBl9KYBxHs5LXIZnfi2e4c/YWrI\n2/+K8BhtBL09pF6gSQ4TZRRkhou46HuvjOskatGFxZ2vMn+u/Uge6PKTv7PK\n0+F/+2939mSBowXPdtvnJqvpTC+RlpKe+G36kiK2vF3Zpzsc3QP4aQIJhpi/\n1Gp9pJ92SUnt6XKR+8cxIWRgLSjbKnXZciGKz+cjWQCAFLHWmXN8+OyBGv2R\nFzF1PBAkUskSo20WnL507YXO7Sql9BvpYXRcR2kejZy+41/fm5foRKfzItBb\n9P3asDnyAzKAHTEDhDWMIOUbtuQkP+RKbFvPL7ztalJZYqUEQzUSHs2X95Gf\nd3ISOEl0gpqrlcIVPWGFq3uu2neVeWvqXTThevX55yNQJ79uUh2oYIWTChu8\n4d2McHoPAGC5vcirv7zCAuFhCUrFlRFJOOIm/WlzdTZHQFYDbIdolYXzFwnZ\naTgG\r\n=avcc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvT78Igk3ukSSu6iH1KY+cxMeJQ162nAFvA/Vq0t5bUAiAP/F6GKMVzqbubLbA2weLsSuKmyNWh23lLpn5eqczHIg=="}]},"_npmUser":{"name":"bryter-bliss","email":"bliss@bryter.io"},"directories":{},"maintainers":[{"name":"carolstran","email":"hello@workwithcarolyn.com"},{"name":"gvonkoss","email":"gabrielle@gvonkoss.com"},{"name":"coolcut","email":"jan@fruechtl.me"},{"name":"bryter-bliss","email":"bliss@bryter.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avatar_1.0.0_1620116513343_0.12779398932732833"},"_hasShrinkwrap":false},"1.0.1-alpha.0":{"name":"@bliss-design-system/avatar","version":"1.0.1-alpha.0","description":"Representation of a user account or user group","repository":{"type":"git","url":"git+https://gitlab.com/bliss-design-system/components.git","directory":"packages/avatar"},"publishConfig":{"access":"public"},"license":"MIT","type":"module","main":"./index.js","module":"./index.js","types":"./index.d.ts","exports":{".":"./index.js","./*":"./*","./package.json":"./package.json"},"scripts":{"test":"echo 'Error: tests should be run from the component toolkit root.' && exit 1"},"dependencies":{"lit-element":"^2.4.0","lit-html":"^1.3.0"},"peerDependencies":{"@bliss-design-system/tokens":"^1.4.0"},"contributes":{"html.customData":["./custom-elements.json"]},"readme":"# \\<bliss-avatar>\n\n`<bliss-avatar>` is a representation of a user account or user group (i.e. `Human Resources`). It displays either the initials of an entry or number and is purely text-based (no images or other assets).\n\nIn previous versions of Bliss CSS, this component was named `User Circle`.\n\n- [Installation](#-installation)\n- [Usage](#-usage)\n  - [Properties](#properties)\n  - [Known limitations](#known-limitations)\n- [Contributing](#-contributing)\n  - [Demoing with Storybook](#demoing-with-storybook)\n  - [Testing](#testing)\n  - [Committing](#committing)\n  - [Opening a merge request](#opening-a-merge-request)\n- [Troubleshooting](#-troubleshooting)\n\n## 📦 Installation\n\nTo install this component, run:\n\n```bash\nyarn add @bliss-design-system/avatar\n```\n\n## 🏎 Usage\n\nTo use this component, you'll need to register the component to the `window`'s [Custom Elements Registry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry). In order to achieve that, you'll want to call this function within your application's client-facing entry file:\n\n```js\nimport { blissRegisterAvatar } from '@bliss-design-system/avatar';\n\nblissRegisterAvatar(); // Registers <bliss-avatar>\n```\n\nThat will make the component available in your application and you can use it like this:\n\n```html\n<!-- Render an avatar with the default user variant displaying MM -->\n<bliss-avatar content=\"Max Mustermann\"></bliss-avatar>\n```\n\nYou can also pass a number as the `content` value to automatically apply the `more` variant:\n\n```html\n<!-- Render an avatar with the more variant displaying +3 -->\n<bliss-avatar content=\"3\"></bliss-avatar>\n```\n\n### Properties\n\nThe component accepts the following properties:\n\n| Property        | Type           | Description                | Default | Required | Options |\n| --------------- |:--------------:| :-------------------------:|:-------:|:--------:|:-------:|\n| content         | String         | Determines what is displayed in the avatar     |  `\"\"`   | true     | -  |\n| variant         | String         | Applies a variant to the avatar component     |  `user`   | false     | `user`, `user-group`, `more`  |\n| compact         | Boolean        | Adds a border to the avatar without increasing the size  |  `false`   | false     | -  |\n| hasTooltip         | Boolean        | Removes the `title` attribute content when set to `true`  |  `false`   | false     | -  |\n\n### Known limitations\n\nThe avatar generates the displayed initials based on the text provided through the `content` attribute. It will do this by grabbing the first letter character from the first word and last word (if applicable). If one word is provided, only the first letter from that word will be displayed (i.e. a user group called `Finance` will display `F`).\n\nThe avatar will pass over and not show any numbers within the provided content (i.e. a user group called `Human Resources 101` will display `HR`). If a number is included within a word, then it will display the first character regardless of if it's a number or letter (i.e. `2021Karen` will display `2` and `Karen2021` will display `K`).\n\nIf the value provided through the `content` attribute is a number, then the `more` variant will automatically be applied. This means that the avatar will display the provided number preceded by a `+` character (i.e. `8` will display `+8`). \n\n## 🫕 Contributing\n\nIf you'd like to contribute, please open an issue with your suggested change on our [Proposal Board](https://gitlab.com/groups/bliss-design-system/-/boards/2409900). Once that is accepted, either the Bliss team will work on it or you can make changes locally by doing the following:\n\n```bash\n# Clone this repository\ngit clone https://gitlab.com/bliss-design-system/components.git\n\n# Move into the component toolkit\ncd components/\n\n# Install the dependencies\nyarn\n```\n\nYou don't need to move into the package's directory to run storybook, tests or anything else. All of those commands exist in the root of the component toolkit, so while you can work on the component within its specific folder, you don't need to move through directories to run anything.\n\n### Demoing with Storybook\n\nYou can see all of your changes as you make them on Storybook.\n\nTo run a local instance of Storybook for this component, run:\n\n```bash\nyarn storybook\n```\n\n### Testing\n\nIf you want to test as you develop, run:\n\n```bash\nyarn test\n\n// or\n\nyarn test:watch\n```\n\n### Committing\n\nWe follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/), meaning that you'll be prompted to fill out a descriptive message when you commit. We also use these commits to manage our releases, so we appreciate details.\n\nAs a guideline for this component, we use:\n- `fix` for bug fixes, minor stylistic improvements, etc.\n- `feat` for any backward compatible API changes.\n\nFor anything that breaks backwards compatibility or introduces significant changes that require a major version change, please get in touch with the team.\n\n### Opening a merge request\n\nWhen you're ready to open a merge request, please use a descriptive title and fill out the provided template.\n\nThe team will be notified, but it helps to post your merge request in [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P).\n\n## 🙃 Troubleshooting\n\nWe'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via [bliss@bryter.io](mailto:bliss@bryter.io) or via the [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P) Slack channel ✨.\n","readmeFilename":"README.md","bugs":{"url":"https://gitlab.com/bliss-design-system/components/issues"},"homepage":"https://gitlab.com/bliss-design-system/components#readme","_id":"@bliss-design-system/avatar@1.0.1-alpha.0","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-2WZrlnD9+kq9f66FRkK1XJwdBHSF/S+/2+QyHjC8K9JRtUs5CbB8bCcbu2w8+Ku3GIo21QbPzmFiUhlsDTdpBA==","shasum":"e38b11d45b656bffd9e15b18d4b321ff377acb1c","tarball":"https://registry.npmjs.org/@bliss-design-system/avatar/-/avatar-1.0.1-alpha.0.tgz","fileCount":11,"unpackedSize":156892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5C5TCRA9TVsSAnZWagAAK84P/RAwjQIacq9qXZPVefiL\nB57YMgjaNuuHBwWBbW9j1rpN4DtnRM3bYpIt6MF4tGddrsunZzvBG8dVgmRG\nYgYb8KrbJVi8nvDR34SSPfWD2GPF14e4lE6oLnEVHO2UZO3i6mc6TbXLPOJH\nmOZ7KTm0BQ56Ktfyxs3XAQ1ChHpnLMNWw2K0v8pli7qNUGo1kRCb82fMEPmq\nR0g7Fs09xlPnQ3YGuM9IzIrQUEGjxO4/nyjI2qKb6nd4/HJ4xLchZynFjEO4\nfAl6sDlO0O98ovEF2rT2pmM7NbqpT291X+HNpQwQkm54bPASTFTya7LJqU4P\nIUO+KIbjCgJgvGoQHTrmUPACW0If5rg32rXf8+WdmvJn1bADoAVJvoNCYACJ\nU4y9YsPl7hIhmhP2yUUWQuME3UxuqkVvrknpYgoL3gZa3EJDXZHqRuKyjbyT\nGGi0NEoRZpux/QUydutsIXF2QnO9d/N7Yvx3ahAGI0iAgzNYK9DyAlznAynb\nqWsScm5HmBRWjvdYG7g2ihiI7rpiN3RCGTR2flJsVa2amPgtKoUSrHNt9qYF\ng6dVL0Tn+C52cZW51XXCVHQ7jOHyq7QzoC1u6WvSo2gjotna0RxxePRyoEm4\nQDs8hA5EjfyoxCYxc0q42gn8mmOQXsaysVigytgmFgcSQdl+U2IF+JRi003L\nmypl\r\n=HiQr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGdQVpqmTVEnFfFpP8llaTMsTswZRe3WiDy3im0antvAIgb6gDq+E1MMCdFJ4KhZGdJszE7YweTGrggcU2Z7rmOec="}]},"_npmUser":{"name":"bryter-bliss","email":"bliss@bryter.io"},"directories":{},"maintainers":[{"name":"gvonkoss","email":"gabrielle@gvonkoss.com"},{"name":"coolcut","email":"jan@fruechtl.me"},{"name":"bryter-bliss","email":"bliss@bryter.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avatar_1.0.1-alpha.0_1625566803358_0.6468488860527859"},"_hasShrinkwrap":false},"1.1.0":{"name":"@bliss-design-system/avatar","version":"1.1.0","description":"Representation of a user account or user group","repository":{"type":"git","url":"git+https://gitlab.com/bliss-design-system/components.git","directory":"packages/avatar"},"keywords":["avatar","web components","bliss","lit"],"publishConfig":{"access":"public"},"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./*","./package.json":"./package.json"},"scripts":{"test":"echo 'Error: tests should be run from the component toolkit root.' && exit 1"},"dependencies":{"lit-element":"^2.4.0","lit-html":"^1.3.0","tslib":"^2.0.3"},"devDependencies":{"@bliss-design-system/tokens":"^1.6.2"},"contributes":{"html.customData":["./custom-elements.json"]},"bugs":{"url":"https://gitlab.com/bliss-design-system/components/issues"},"homepage":"https://gitlab.com/bliss-design-system/components#readme","_id":"@bliss-design-system/avatar@1.1.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-CL/0en0Qh/5PAqDihgd4FmW3+GlutINtUNdSAol9cLuhWqsg9PN3c2APW4lmn4NiiTI6Hlo4NShG8jUzncnoxw==","shasum":"8eea76fcad5ea597cf016a149b79b560299de119","tarball":"https://registry.npmjs.org/@bliss-design-system/avatar/-/avatar-1.1.0.tgz","fileCount":11,"unpackedSize":239093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEkpWCRA9TVsSAnZWagAAY5MP/jaJZcd7fGK+rphuJZtz\nFlOCSvO+xk+HjHrStjLMSm7nhidqMVnOTO3rapsKyiD6ZuhsJhilam+D9NLu\nRAbeZLFdJZ9z1ffYwZAamXcWYdCeoRoGsXrM43RFR4HB3WiG/Bzc+vKIajJn\nBkVrH1Q2dK8fe9VSpDTginOQtvPWqbmonYcQ1Tm/QNmKUAtLGVgkdTfMO2Px\ngeikV2iR0JEOKZAU9/viqN3YwSNVChWMMdgG99ZG5M5CG1pbZX/wP0WNWp7X\n4N9aviSq4BafkvrjrwrgUyhJx9OXOGzFuKILOfIbMbI7hzLfK+X4epPU7bUk\nbqqVFslZI+PyXH7Y2N3vu32W4IRZuzTR80iPURwve15Xgdr+UiVtdzroi2Yp\nQ4W+RYuHT4lul+BbkTDmZZQ18z/uVjcE8PfiCIjKLfMFQpfxs0mfsGxgqo4s\nWVEmKkJmuOzs2OkfPF++/WeGJgFRpuinRdcXskSb/dtSgY7Pdup0QkXD7SiS\nm69mGYSyORp8q/FlJ0pXMe16HSjN2T7u2D35b9Sfj5tQFLpdnSxnaXejPwJi\n3xBdSIS2eaEIq0cJTz/iJtDp26DHhd+dL58YkV5fGbwdbuIa8eZqLZNyZzjw\nTe22dQqy4EU2y6MljamZoDJ1QtMLu5qsAKVqTiXscEE0sZw4tDkIu/vUn5Fq\nm3B/\r\n=Lafd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDv22Etzdx6WVITgIJuRzDhARvxEnXkMWul4gaK6E23XAiAGMSm/lNvdMXolNYMd6W6j5Q8OZKqRMT70M//55B5s+A=="}]},"_npmUser":{"name":"bryter-bliss","email":"bliss@bryter.io"},"directories":{},"maintainers":[{"name":"bryter-bliss","email":"bliss@bryter.io"},{"name":"coolcut","email":"jan@fruechtl.me"},{"name":"gvonkoss","email":"gabrielle@gvonkoss.com"},{"name":"kilmc","email":"kil@kilmc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avatar_1.1.0_1628588630251_0.2986593782754978"},"_hasShrinkwrap":false},"1.1.1":{"name":"@bliss-design-system/avatar","version":"1.1.1","description":"Representation of a user account or user group","repository":{"type":"git","url":"git+https://gitlab.com/bliss-design-system/components.git","directory":"packages/avatar"},"keywords":["avatar","web components","bliss","lit"],"publishConfig":{"access":"public"},"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":"./dist/index.js","./*":"./*","./package.json":"./package.json"},"scripts":{"test":"echo 'Error: tests should be run from the component toolkit root.' && exit 1"},"dependencies":{"lit":"2.0.0-rc.2"},"devDependencies":{"@bliss-design-system/tokens":"^1.6.2"},"contributes":{"html.customData":["./custom-elements.json"]},"bugs":{"url":"https://gitlab.com/bliss-design-system/components/issues"},"homepage":"https://gitlab.com/bliss-design-system/components#readme","_id":"@bliss-design-system/avatar@1.1.1","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-wpMc/XunROHGcGs1gnBISNwzj5mGRs4V1jUueeOH7PR1tEVMUP3JbVRi+ogU6sYKe6j/fMG6Y3cG8R3BgMrdJQ==","shasum":"f3e8ce7d363e338dc9bc1979a430f2128e7f6acd","tarball":"https://registry.npmjs.org/@bliss-design-system/avatar/-/avatar-1.1.1.tgz","fileCount":11,"unpackedSize":243812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzICTCRA9TVsSAnZWagAAidEP/1Ki3AUDNXfiwth7AVQZ\nVDpI4JUhLAi+I1z9ioE0iGnUPTK4jAafwUaSoqjDoX9dBrYrwO06l7ePQYib\no6qmMhf2ygbxWZNh41Nj0Qm/NFVBSfNnrzIC2cRDNTduA7Ci9J3AQMIrU7Di\niwgIBBuJH7Zx80NmG0iI0rer4FcpAJrNo8ZhDnoZRLt6TA2izfRb2vwuwkY5\n7mgwpvhvD2fn7QyxZ1k4pAx4ZubJ6UsEhHMj/+OZTeQqF+GlkTfwjdEp007d\n/JYJ/Xf7OhMJIGKpZwfhOCVGSClANvvTJQcm1KdB3xWZuQc0WwndqcPW/5zS\n0D3N3/EJMMgaj53BQ0rJbCt5yROtB1ciAaXYPIfKk5NIHGPuglRrn66kXxW+\nLEOP3OtgXnJjG7YMaXf9RQEzg91veNK8MaxmhPpnCArEKKeYwSVFbDutTx2H\n6tAsGBZ7uNZQ6/RjgbQeM9DH6DHO7Fj7/p3h9CqkAnJS/4vo10ps6dhnYJGj\nFpHwdZ+8WaLviHA1EXsPNqa6WO2MYN3lTnjOdbZiLDUul1jHsntqgSYaWr08\nAtoWq6mbKS5Fmg3o1DYkwt04Nhqluw8aqThmHO5TOv/clVmmaWO1qB5DXcVw\n9yG5e5ISkNjiXe1X9WZtT8mYkpNes/Mgv4ki19lzQCmhJbnUhHVsRtT3kaTG\nKAXi\r\n=owUF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmgOOgR9vEUMaI4n5n+suYkQKfo76PPWz0ZP2m9tMcZAiBQRgOPzgKWY/gmDQWjzT4FxPaI4ZWAQcm9bq8CtM01Ww=="}]},"_npmUser":{"name":"bryter-bliss","email":"bliss@bryter.io"},"directories":{},"maintainers":[{"name":"bryter-bliss","email":"bliss@bryter.io"},{"name":"coolcut","email":"jan@fruechtl.me"},{"name":"gvonkoss","email":"gabrielle@gvonkoss.com"},{"name":"kilmc","email":"kil@kilmc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/avatar_1.1.1_1632223350226_0.7107285106976884"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-13T09:56:55.342Z","1.0.0-beta.0":"2021-04-13T09:56:55.746Z","modified":"2022-04-04T19:33:20.695Z","1.0.0":"2021-05-04T08:21:53.459Z","1.0.1-alpha.0":"2021-07-06T10:20:03.517Z","1.1.0":"2021-08-10T09:43:50.397Z","1.1.1":"2021-09-21T11:22:30.398Z"},"maintainers":[{"name":"bryter-bliss","email":"bliss@bryter.io"},{"name":"coolcut","email":"jan@fruechtl.me"},{"name":"gvonkoss","email":"gabrielle@gvonkoss.com"},{"name":"kilmc","email":"kil@kilmc.com"}],"description":"Representation of a user account or user group","homepage":"https://gitlab.com/bliss-design-system/components#readme","repository":{"type":"git","url":"git+https://gitlab.com/bliss-design-system/components.git","directory":"packages/avatar"},"bugs":{"url":"https://gitlab.com/bliss-design-system/components/issues"},"license":"MIT","readme":"# \\<bliss-avatar>\n\n`<bliss-avatar>` is a representation of a user account or user group (i.e. `Human Resources`). It displays either the initials of an entry or number and is purely text-based (no images or other assets).\n\nIn previous versions of Bliss CSS, this component was named `User Circle`.\n\n- [Installation](#-installation)\n- [Usage](#-usage)\n  - [Properties](#properties)\n  - [Known limitations](#known-limitations)\n- [Contributing](#-contributing)\n  - [Demoing with Storybook](#demoing-with-storybook)\n  - [Testing](#testing)\n  - [Committing](#committing)\n  - [Opening a merge request](#opening-a-merge-request)\n- [Troubleshooting](#-troubleshooting)\n\n## 📦 Installation\n\nTo install this component, run:\n\n```bash\nyarn add @bliss-design-system/avatar\n```\n\n## 🏎 Usage\n\nTo use this component, you'll need to register the component to the `window`'s [Custom Elements Registry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry). In order to achieve that, you'll want to call this function within your application's client-facing entry file:\n\n```js\nimport { blissRegisterAvatar } from '@bliss-design-system/avatar';\n\nblissRegisterAvatar(); // Registers <bliss-avatar>\n```\n\nThat will make the component available in your application and you can use it like this:\n\n```html\n<!-- Render an avatar with the default user variant displaying MM -->\n<bliss-avatar content=\"Max Mustermann\"></bliss-avatar>\n```\n\nYou can also pass a number as the `content` value to automatically apply the `more` variant:\n\n```html\n<!-- Render an avatar with the more variant displaying +3 -->\n<bliss-avatar content=\"3\"></bliss-avatar>\n```\n\n### Properties\n\nThe component accepts the following properties:\n\n| Property        | Type           | Description                | Default | Required | Options |\n| --------------- |:--------------:| :-------------------------:|:-------:|:--------:|:-------:|\n| content         | String         | Determines what is displayed in the avatar     |  `\"\"`   | true     | -  |\n| variant         | String         | Applies a variant to the avatar component     |  `user`   | false     | `user`, `user-group`, `more`  |\n| compact         | Boolean        | Adds a border to the avatar without increasing the size  |  `false`   | false     | -  |\n| hasTooltip         | Boolean        | Removes the `title` attribute content when set to `true`  |  `false`   | false     | -  |\n\n### Known limitations\n\nThe avatar generates the displayed initials based on the text provided through the `content` attribute. It will do this by grabbing the first letter character from the first word and last word (if applicable). If one word is provided, only the first letter from that word will be displayed (i.e. a user group called `Finance` will display `F`).\n\nThe avatar will pass over and not show any numbers within the provided content (i.e. a user group called `Human Resources 101` will display `HR`). If a number is included within a word, then it will display the first character regardless of if it's a number or letter (i.e. `2021Karen` will display `2` and `Karen2021` will display `K`).\n\nIf the value provided through the `content` attribute is a number, then the `more` variant will automatically be applied. This means that the avatar will display the provided number preceded by a `+` character (i.e. `8` will display `+8`). \n\n## 🫕 Contributing\n\nIf you'd like to contribute, please open an issue with your suggested change on our [Proposal Board](https://gitlab.com/groups/bliss-design-system/-/boards/2409900). Once that is accepted, either the Bliss team will work on it or you can make changes locally by doing the following:\n\n```bash\n# Clone this repository\ngit clone https://gitlab.com/bliss-design-system/components.git\n\n# Move into the component toolkit\ncd components/\n\n# Install the dependencies\nyarn\n```\n\nYou don't need to move into the package's directory to run storybook, tests or anything else. All of those commands exist in the root of the component toolkit, so while you can work on the component within its specific folder, you don't need to move through directories to run anything.\n\n### Demoing with Storybook\n\nYou can see all of your changes as you make them on Storybook.\n\nTo run a local instance of Storybook for this component, run:\n\n```bash\nyarn storybook\n```\n\n### Testing\n\nIf you want to test as you develop, run:\n\n```bash\nyarn test\n\n// or\n\nyarn test:watch\n```\n\n### Committing\n\nWe follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/), meaning that you'll be prompted to fill out a descriptive message when you commit. We also use these commits to manage our releases, so we appreciate details.\n\nAs a guideline for this component, we use:\n- `fix` for bug fixes, minor stylistic improvements, etc.\n- `feat` for any backward compatible API changes.\n\nFor anything that breaks backwards compatibility or introduces significant changes that require a major version change, please get in touch with the team.\n\n### Opening a merge request\n\nWhen you're ready to open a merge request, please use a descriptive title and fill out the provided template.\n\nThe team will be notified, but it helps to post your merge request in [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P).\n\n## 🙃 Troubleshooting\n\nWe'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via [bliss@bryter.io](mailto:bliss@bryter.io) or via the [#bliss_support](https://bryterworkspace.slack.com/archives/CLBTUEQ5P) Slack channel ✨.\n","readmeFilename":"README.md","keywords":["avatar","web components","bliss","lit"]}