{"_id":"@arbitral/ngx-bar-rating","_rev":"3-b6ba03ea01725c1b0f6254a2ea2a670a","name":"@arbitral/ngx-bar-rating","dist-tags":{"latest":"8.1.0"},"versions":{"2.1.0":{"name":"@arbitral/ngx-bar-rating","version":"2.1.0","keywords":["rating","angular","bar","bar-rating","star","stars"],"author":{"name":"Murhaf Sousli","email":"murhafsousi@gmail.com"},"license":"MIT","_id":"@arbitral/ngx-bar-rating@2.1.0","maintainers":[{"name":"coturiv9","email":"coturiv@gmail.com"},{"name":"stevenhines","email":"steve@iapps.cc"}],"homepage":"https://github.com/MurhafSousli/ngx-bar-rating#readme","bugs":{"url":"https://github.com/MurhafSousli/ngx-bar-rating/issues"},"dist":{"shasum":"523735abf06759168e00a3db1431d698cb5a8777","tarball":"https://registry.npmjs.org/@arbitral/ngx-bar-rating/-/ngx-bar-rating-2.1.0.tgz","fileCount":29,"integrity":"sha512-/e8O7eEhpvSlSOdoN/Zo+0I4r9MSSyHF/n3XqF1SmZ0uflcqcA/wZjPRncJDwJyxZCKSstzdPhI5NA67bxlBeQ==","signatures":[{"sig":"MEUCIQChALQP1eqEYnYsVhLSjQ6Xdf8yELC22snL6Tny0IrwYAIgSETcGyojentqljdaBrUOjo+WdHt0ELytqrv38KwfaVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCF1CRA9TVsSAnZWagAADTQP/0iKoJPbITY7y4JE3C0Y\n51UvVXSHVBDHMxySV2OTjVETUlHrpSKYXxIsCnmKOyOCiEhrgrapbssgVgiE\na4+IsR6Hu2AnSWopDmkofBsvE6gJ+BFvJqYOzmAtYInjrFVrpaEhT32c6PmS\nhwrCSE/9OvDlnxks4tTrF/PxC0M6scnC99qpkLir1taFzQ3FIlxqxu7lg9Hc\nKlBGvirFImsTEDbz1nHxTJkhW+mY0VLDFJTOaVvlKfvDfsmLh3xL4f5RSzVE\nQG6KHqJHJKUGY+qMV93LT5viO0PvSBmtOTepSsfLNIqWHjuMIBoSTZ/2sLuo\nPuZbTNIpeFTuwLc0yfUiTxmTrV2iAJVcwiNpK8oe1HZfKShmgW0TO402CncQ\nydNRbzqsZargzTUBBZ0lJiYTGTMjerUsxLWw1wcnnAjHNS1XcfJ41CNxkErI\nxOHRmHUBYJpeArWhdtsuiM2EtnyfdR49+0BWEG7NHjVg6La8rH1URigr0ACM\n/PGOr5xutsnUT/oVF2DEhM6Vk2O9ZU5KFAqLxQfr9bFCkC6ZVXA/S61utgpL\ndPX8pyl9jzqgvwix5POsRXz0Di3KXW3czfLnhgS46z5U0b/+s2BBDhweuJNd\naLyJxzQfpc+DhKa1taG33qqsfzFl/JvSduggvw819AGprjauR4plpTPI0DoS\n52kv\r\n=e5/k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/arbitral-ngx-bar-rating.umd.js","es2015":"fesm2015/arbitral-ngx-bar-rating.js","module":"fesm2015/arbitral-ngx-bar-rating.js","esm2015":"esm2015/arbitral-ngx-bar-rating.js","typings":"arbitral-ngx-bar-rating.d.ts","_npmUser":{"name":"coturiv9","email":"coturiv@gmail.com"},"fesm2015":"fesm2015/arbitral-ngx-bar-rating.js","metadata":"arbitral-ngx-bar-rating.metadata.json","repository":{"url":"git+https://github.com/MurhafSousli/ngx-bar-rating.git","type":"git"},"_npmVersion":"6.14.11","description":"Angular Bar Rating","directories":{},"sideEffects":false,"_nodeVersion":"14.16.0","dependencies":{"tslib":"^2.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^12.0.0","@angular/common":"^12.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-bar-rating_2.1.0_1629233525089_0.22551314438859937","host":"s3://npm-registry-packages"}},"8.1.0":{"name":"@arbitral/ngx-bar-rating","version":"8.1.0","description":"Angular Bar Rating","repository":{"type":"git","url":"git+https://github.com/MurhafSousli/ngx-bar-rating.git"},"homepage":"https://github.com/MurhafSousli/ngx-bar-rating#readme","bugs":{"url":"https://github.com/MurhafSousli/ngx-bar-rating/issues"},"keywords":["rating","angular","bar","bar-rating","star","stars"],"author":{"name":"Murhaf Sousli","email":"murhafsousi@gmail.com"},"license":"MIT","peerDependencies":{"@angular/common":">=20.0.0","@angular/core":">=20.0.0","@angular/forms":">=20.0.0"},"dependencies":{"tslib":"^2.3.1"},"module":"fesm2022/arbitral-ngx-bar-rating.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/arbitral-ngx-bar-rating.mjs"}},"sideEffects":false,"gitHead":"afa4015d2740fc38db81caa311cf3faa508a9ab5","_id":"@arbitral/ngx-bar-rating@8.1.0","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-TcqWyXwQkyeGDnufeUQrq6wH3+qBvFbDJMstDmSxWN8IQstf6oq+/5QMurfT2WjfA3qzUDb0r7/ud5XtQdYwew==","shasum":"93504dda3f05190b8af86671fc32b5cc968461d6","tarball":"https://registry.npmjs.org/@arbitral/ngx-bar-rating/-/ngx-bar-rating-8.1.0.tgz","fileCount":11,"unpackedSize":61990,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCRUHSumpmLgbiZB9Z7CNfewbc78NhnqvfmYuN/qEUmzwIgCtIswuGNVkKAhoq1SCBPJxrsdMnWQSKFWy7P8EZ1mWE="}]},"_npmUser":{"name":"coturiv9","email":"coturiv@gmail.com"},"directories":{},"maintainers":[{"name":"coturiv9","email":"coturiv@gmail.com"},{"name":"stevenhines","email":"steve@iapps.cc"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-bar-rating_8.1.0_1764364411156_0.8527118830511826"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-17T20:52:05.024Z","modified":"2025-11-28T21:13:31.693Z","2.1.0":"2021-08-17T20:52:05.476Z","8.1.0":"2025-11-28T21:13:31.413Z"},"bugs":{"url":"https://github.com/MurhafSousli/ngx-bar-rating/issues"},"author":{"name":"Murhaf Sousli","email":"murhafsousi@gmail.com"},"license":"MIT","homepage":"https://github.com/MurhafSousli/ngx-bar-rating#readme","keywords":["rating","angular","bar","bar-rating","star","stars"],"repository":{"type":"git","url":"git+https://github.com/MurhafSousli/ngx-bar-rating.git"},"description":"Angular Bar Rating","maintainers":[{"name":"coturiv9","email":"coturiv@gmail.com"},{"name":"stevenhines","email":"steve@iapps.cc"}],"readme":"<p align=\"center\">\r\n  <img height=\"150px\" width=\"150px\" style=\"text-align: center;\" src=\"https://cdn.rawgit.com/MurhafSousli/ngx-bar-rating/af32c04d/assets/logo.svg\">\r\n  <h1 align=\"center\">Angular Bar Rating</h1>\r\n  <p align=\"center\">Minimal, light-weight Angular ratings.</p>\r\n</p>\r\n\r\n[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://ngx-bar-rating.netlify.app/)\r\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-bar-rating)\r\n[![npm](https://img.shields.io/npm/v/ngx-bar-rating.svg)](https://www.npmjs.com/package/ngx-bar-rating)\r\n[![CI Build](https://github.com/MurhafSousli/ngx-bar-rating/actions/workflows/integrate.yml/badge.svg)](https://github.com/MurhafSousli/ngx-bar-rating/actions/workflows/integrate.yml)[![codecov](https://codecov.io/gh/MurhafSousli/ngx-bar-rating/graph/badge.svg?token=XH3LVM5QS6)](https://codecov.io/gh/MurhafSousli/ngx-bar-rating)\r\n[![Downloads](https://img.shields.io/npm/dt/ngx-bar-rating.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-bar-rating)\r\n[![Monthly Downloads](https://img.shields.io/npm/dm/ngx-bar-rating.svg)](https://www.npmjs.com/package/ngx-bar-rating)\r\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-bar-rating.svg)](https://bundlephobia.com/result?p=ngx-bar-rating)\r\n[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)\r\n\r\n___\r\n\r\nIf you like this plugin, please give it a star ⭐.\r\n\r\n## Table of Contents\r\n\r\n- [Live Demo](https://ngx-bar-rating.netlify.app/)\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n- [Options](#options)\r\n- [Click Effect](#click-effect)\r\n- [CSS Variables](#css-variables)\r\n- [Themes](#themes)\r\n- [Issues](#issues)\r\n- [Author](#author)\r\n\r\n<a name=\"installation\"/>\r\n\r\n## Installation\r\n\r\nInstall it with npm\r\n\r\n```bash\r\nnpm i ngx-bar-rating\r\n```\r\n\r\n\r\n<a name=\"usage\"/>\r\n\r\n## Basic usage:\r\n\r\nImport `BarRating` or `BarRatingModule` in your component imports.\r\n\r\n```ts\r\n@Component({\r\n  standalone: true,\r\n  selector: 'bars',\r\n  template: `\r\n    <bar-rating [(rate)]=\"rate\"/>\r\n  `,\r\n  styleUrl: './example.component.scss',\r\n  imports: [BarRating]\r\n})\r\nexport class BarsComponent {\r\n  rate: number = 4;\r\n}\r\n```\r\n\r\nImport the theme in your global styles (unless you want to use custom template)\r\n\r\n```scss\r\n@import 'ngx-bar-rating/themes/br-default-theme';\r\n```\r\n\r\n<a name=\"options\"/>\r\n\r\n## Rating inputs and outputs:\r\n\r\n| Name             | Description                                                          | Default |\r\n|------------------|----------------------------------------------------------------------|---------|\r\n| **[rate]**       | Current rating. Can be a decimal value like 3.14                     | null    |\r\n| **[max]**        | Maximal rating that can be given using this widget                   | 5       |\r\n| **[theme]**      | Theme class, see available [themes](#themes)                         | default |\r\n| **[readonly]**   | A flag that indicates if rating can be changed                       | false   |\r\n| **[showText]**   | Display rating title if available, otherwise display rating value    | false   |\r\n| **[required]**   | A flag that indicates if rating is disabled. works only with forms   | false   |\r\n| **[disabled]**   | A flag that indicates if rating is disabled. works only with forms   | false   |\r\n| **[titles]**     | Titles array. array should represent all possible values including 0 | []      |\r\n| **(rateChange)** | A stream that emits when the rating value is changed                 |         |\r\n\r\n### Custom rating template\r\n\r\n`BarRatingModule` provides a couple of directives to set custom rating template of your choice.\r\n\r\n- `*ratingActive`: Set template, when a bar/star is active or hovered.\r\n- `*ratingInactive`: Set template, when a bar/star is inactive.\r\n- `*ratingFraction`: Set template, when a bar/star is a fraction.\r\n\r\nHere are some example:\r\n\r\n#### Bootstrap rating example\r\n\r\n```html\r\n<bar-rating [(rate)]=\"rate\" max=\"5\">\r\n  <i *ratingActive class=\"bi bi-star-fill\" style=\"margin: 2px; color: #edb867\"></i>\r\n  <i *ratingInactive class=\"bi bi-star-fill\" style=\"margin: 2px; color: #d2d2d2\"></i>\r\n</bar-rating>\r\n```\r\n\r\n#### FontAwesome rating example\r\n\r\n```html\r\n<bar-rating [(rate)]=\"rate\" max=\"10\">\r\n  <fa-icon *ratingInactive [icon]=\"['far', 'star']\" [fixedWidth]=\"true\" size=\"lg\" style=\"color: #d2d2d2\"/>\r\n  <fa-icon *ratingActive [icon]=\"['fas', 'star']\" [fixedWidth]=\"true\" size=\"lg\" style=\"color: #50e3c2\"/>\r\n  <fa-icon *ratingFraction [icon]=\"['fas', 'star-half-alt']\" [fixedWidth]=\"true\" size=\"lg\" style=\"color: #50e3c2\"/>\r\n</bar-rating>\r\n```\r\n\r\n#### Movie rating example\r\n\r\n```html\r\n<bar-rating [(rate)]=\"rate\" max=\"4\" theme=\"movie\" showText\r\n            [titles]=\"['Bad', 'Mediocre' , 'Good', 'Awesome']\"/>\r\n```\r\n\r\nIt can be used with Angular forms:\r\n\r\n```html\r\n<form #form=\"ngForm\">\r\n  <bar-rating name=\"rating\" [(ngModel)]=\"formRating\" [max]=\"4\" required disabled/>\r\n</form>\r\n<p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>\r\n<pre>{{ formRating }}</pre>\r\n```\r\n\r\nAnd reactive forms:\r\n\r\n```html\r\n<form [formGroup]=\"ratingForm\">\r\n  <bar-rating formControlName=\"rate\" [max]=\"4\" required disabled/>\r\n</form>\r\n<p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>\r\n<pre>{{ formRating }}</pre>\r\n```\r\n\r\n<a name=\"click-effect\"/>\r\n\r\n## Click effect\r\n\r\nTo apply a scale-fade effect when a bar is clicked, simply add the `effect` directive to the `<bar-rating>` component:\r\n\r\n```html\r\n<bar-rating effect/>\r\n```\r\n\r\n## CSS variables\r\n\r\n* `--br-font-size`: Defines the font size for the step element. Affects the themes: [`default`, `square`, `stars`].\r\n* `--br-width`: Specifies the width of the step element. Affects the themes: [`stars`, `square`, `movie`, `vertical`, `horizontal`].\r\n* `--br-height`: Specifies the height of the step element. Affects the themes: [`stars`, `square`, `movie`, `vertical`, `horizontal`].\r\n* `--br-gap`: Sets the gap between the individual steps.\r\n* `--br-active-color`: Defines the color for active steps.\r\n* `--br-inactive-color`: Defines the color for inactive steps.\r\n* `--br-effect-scale`: Specifies the scale value for the scale-fade effect (e.g., `2`).\r\n* `--br-effect-duration`: Sets the duration of the scale-fade animation (e.g., `0.4s`).\r\n* `--br-effect-ease`: Defines the easing function for the scale-fade animation (e.g., `ease-out`).\r\n\r\n<a name=\"themes\"/>\r\n\r\n## Predefined themes\r\n\r\n> If you want to use a custom rating template, you don't need to import any CSS theme.\r\n\r\nIf you want to use one of the predefined themes, you will need to import it in the global style `style.scss`\r\n\r\n- Pure CSS stars (default) `theme=\"default\"`\r\n\r\n```css\r\n@import 'ngx-bar-rating/themes/br-default-theme';\r\n```\r\n\r\n- Horizontal bars `theme=\"horizontal\"`\r\n\r\n```css\r\n@import 'ngx-bar-rating/themes/br-horizontal-theme';\r\n```\r\n\r\n- Vertical bars `theme=\"vertical\"`\r\n\r\n```css\r\n@import 'ngx-bar-rating/themes/br-vertical-theme';\r\n```\r\n\r\n- Custom stars `theme=\"stars\"`\r\n\r\n```css\r\n@import 'ngx-bar-rating/themes/br-stars-theme';\r\n```\r\n\r\n- Movie rating `theme=\"movie\"`\r\n\r\n```css\r\n@import 'ngx-bar-rating/themes/br-movie-theme';\r\n```\r\n\r\n- Square rating `theme=\"square\"`\r\n\r\n```css\r\n@import 'ngx-bar-rating/themes/br-square-theme';\r\n```\r\n\r\nRating style can be easily customized, check the classes used in any theme and add your own css.\r\n\r\nYou can also do the same for forms classes such as `untouched, touched, dirty, invalid, valid ...etc`\r\n\r\n<a name=\"issues\"/>\r\n\r\n## Issues\r\n\r\nIf you identify any errors in this component, or have an idea for an improvement, please open\r\nan [issue](https://github.com/MurhafSousli/ngx-bar-rating/issues). I am excited to see what the community thinks of this\r\nproject, and I would love your input!\r\n\r\n<a name=\"author\"/>\r\n\r\n## Author\r\n\r\n**Murhaf Sousli**\r\n\r\n- [github/murhafsousli](https://github.com/MurhafSousli)\r\n- [twitter/murhafsousli](https://twitter.com/MurhafSousli)\r\n\r\n","readmeFilename":"README.md"}