ngx-bar-rating - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

lib/bar-rating.d.ts

 import { EventEmitter, OnInit, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor, Validator, FormControl } from '@angular/forms';
+import { ActiveRating, FractionRating, InactiveRating } from './custom-rating';
+import * as i0 from "@angular/core";
+declare enum BarRatingUnitState {
+    active = "active",
+    inactive = "inactive",
+    selected = "selected",
+    fraction = "fraction"
+}
+interface BarRatingContext {
+    state: BarRatingUnitState;
+    click: (e: any) => void;
+    enter: () => void;
+}
 export declare class BarRating implements OnInit, OnChanges, ControlValueAccessor, Validator {
     private changeDetectorRef;
-    contexts: {
-        fraction: boolean;
-        selected: boolean;
-        active: boolean;
-        click: (e: any) => void;
-        enter: () => void;
-    }[];
+    readonly unitState: typeof BarRatingUnitState;
+    contexts: BarRatingContext[];
     nextRate: number;
@@ -29,3 +37,3 @@ disabled: boolean;
     /**
-     * An event fired when a user is hovering over a given rating.
+     * A stream that emits when a user is hovering over a given rating.
      * Event's payload equals to the rating being hovered over.
@@ -35,3 +43,3 @@ */
     /**
-     * An event fired when a user stops hovering over a given rating.
+     * A stream that emits when a user stops hovering over a given rating.
      * Event's payload equals to the rating of the last item being hovered over.
@@ -41,6 +49,13 @@ */
     /**
-     * An event fired when a user selects a new rating.
+     * A stream that emits when a user selects a new rating.
      * Event's payload equals to the newly selected rating.
      */
     rateChange: EventEmitter<number>;
+    /**
+     * A stream that forwards a bar rating click since clicks are not propagated
+     */
+    barClick: EventEmitter<number>;
+    customActiveRating: ActiveRating;
+    customInActiveRating: InactiveRating;
+    customFractionRating: FractionRating;
     constructor(changeDetectorRef: ChangeDetectorRef);
@@ -60,7 +75,10 @@ ngOnChanges(changes: SimpleChanges): void;
     } | null;
-    onChange: (_: any) => void;
-    onTouched: () => void;
+    onChange(_: any): void;
+    onTouched(): void;
     registerOnChange(fn: (value: any) => any): void;
     registerOnTouched(fn: () => any): void;
     setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BarRating, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BarRating, "bar-rating", never, { "rate": "rate"; "max": "max"; "readOnly": "readOnly"; "theme": "theme"; "showText": "showText"; "titles": "titles"; "required": "required"; }, { "hover": "hover"; "leave": "leave"; "rateChange": "rateChange"; "barClick": "barClick"; }, ["customActiveRating", "customInActiveRating", "customFractionRating"], never>;
 }
+export {};

lib/bar-rating.module.d.ts

@@ -0,2 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./bar-rating";
+import * as i2 from "./bar-rating.pipe";
+import * as i3 from "./custom-rating";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
 export declare class BarRatingModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BarRatingModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BarRatingModule, [typeof i1.BarRating, typeof i2.BarRatingPipe, typeof i3.ActiveRating, typeof i3.InactiveRating, typeof i3.FractionRating], [typeof i4.CommonModule, typeof i5.FormsModule], [typeof i1.BarRating, typeof i3.ActiveRating, typeof i3.InactiveRating, typeof i3.FractionRating]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BarRatingModule>;
 }

lib/bar-rating.pipe.d.ts

 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class BarRatingPipe implements PipeTransform {
     transform(value?: number, titles?: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BarRatingPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<BarRatingPipe, "rateTitle">;
 }

ngx-bar-rating.d.ts

 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="ngx-bar-rating" />
 export * from './public-api';
-export { BarRatingPipe as ɵa } from './lib/bar-rating.pipe';

package.json

 {
   "name": "ngx-bar-rating",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Angular Bar Rating",
@@ -24,16 +24,29 @@ "repository": {
   "peerDependencies": {
-    "@angular/common": "^10.1.3",
-    "@angular/core": "^10.1.3"
+    "@angular/common": ">=13.0.0",
+    "@angular/core": ">=13.0.0",
+    "rxjs": ">=6.0.0"
   },
   "dependencies": {
-    "tslib": "^2.0.0"
+    "tslib": "^2.3.1"
   },
-  "main": "bundles/ngx-bar-rating.umd.js",
-  "module": "fesm2015/ngx-bar-rating.js",
-  "es2015": "fesm2015/ngx-bar-rating.js",
-  "esm2015": "esm2015/ngx-bar-rating.js",
-  "fesm2015": "fesm2015/ngx-bar-rating.js",
+  "module": "fesm2015/ngx-bar-rating.mjs",
+  "es2020": "fesm2020/ngx-bar-rating.mjs",
+  "esm2020": "esm2020/ngx-bar-rating.mjs",
+  "fesm2020": "fesm2020/ngx-bar-rating.mjs",
+  "fesm2015": "fesm2015/ngx-bar-rating.mjs",
   "typings": "ngx-bar-rating.d.ts",
-  "metadata": "ngx-bar-rating.metadata.json",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./ngx-bar-rating.d.ts",
+      "esm2020": "./esm2020/ngx-bar-rating.mjs",
+      "es2020": "./fesm2020/ngx-bar-rating.mjs",
+      "es2015": "./fesm2015/ngx-bar-rating.mjs",
+      "node": "./fesm2015/ngx-bar-rating.mjs",
+      "default": "./fesm2020/ngx-bar-rating.mjs"
+    }
+  },
   "sideEffects": false
-}
+}

public-api.d.ts

 export * from './lib/bar-rating';
 export * from './lib/bar-rating.module';
+export * from './lib/custom-rating';

README.md

@@ -8,2 +8,3 @@ <p align="center">
 [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-bar-rating)
+[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-bar-rating)
 [![npm](https://img.shields.io/npm/v/ngx-bar-rating.svg)](https://www.npmjs.com/package/ngx-bar-rating)
@@ -15,12 +16,14 @@ [![Build Status](https://travis-ci.org/MurhafSousli/ngx-bar-rating.svg)](https://travis-ci.org/MurhafSousli/ngx-bar-rating)
 
-## Table of Contents 
- 
- - [Live Demo](https://MurhafSousli.github.io/ngx-bar-rating)
- - [Installation](#installation)
- - [Usage](#usage) 
- - [Options](#options)
- - [Themes](#themes)
- - [Issues](#issues) 
- - [Author](#author)
+If you like this plugin, please give it a star ⭐.
 
+## Table of Contents
+
+- [Live Demo](https://MurhafSousli.github.io/ngx-bar-rating)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Options](#options)
+- [Themes](#themes)
+- [Issues](#issues)
+- [Author](#author)
+
 <a name="installation"/>
@@ -60,33 +63,59 @@
 
-## Rating options (inputs):
+## Rating inputs and outputs:
 
- - **[rate]**: Current rating. Can be a decimal value like 3.14, default `undefined`.
+| Name             | Description                                                          | Default |
+|------------------|----------------------------------------------------------------------|---------|
+| **[rate]**       | Current rating. Can be a decimal value like 3.14                     | null    |
+| **[max]**        | Maximal rating that can be given using this widget                   | 5       |
+| **[readOnly]**   | A flag that indicates if rating can be changed                       | false   |
+| **[theme]**      | Theme class, see available [themes](#themes)                         | default |
+| **[showText]**   | Display rating title if set, otherwise display rating value          | false   |
+| **[titles]**     | Titles array. array should represent all possible values including 0 | []      |
+| **[showText]**   | A flag that indicates if rating is required for form validation      | false   |
+| **[required]**   | A flag that indicates if rating is disabled. works only with forms   | false   |
+| **[disabled]**   | A flag that indicates if rating is disabled. works only with forms   | false   |
+| **(rateChange)** | A stream that emits when the rating value is changed                 |         |
+| **(hover)**      | A stream that emits when the rating is hovered                       |         |
+| **(leave)**      | A stream that emits when the rating is no longer hovered             |         |
+| **(rateChange)** | A stream that emits when the rating value is changed                 |         |
 
- - **[max]**: Maximal rating that can be given using this widget, default `5`
+### Custom rating template
 
- - **[readOnly]**: A flag indicating if rating can be updated, default `false`
+The module provides a couple of directives to set custom rating template of your choice.
 
- - **[theme]**: Theme class. default `default`, see available [themes](#themes).
+- `[ratingActive]`: Set template, when a bar/star is active or hovered.
+- `[ratingInactive]`: Set template, when a bar/star is inactive.
+- `[ratingFraction]`: Set template, when a bar/star is a fraction.
 
- - **[showText]**: Display rating title if set, otherwise display rating value, default `false`.
+Here are some example:
 
- - **[titles]**: Titles array. array length should be equal to the `max` value, each index represents the rating title, default `[]`.
+#### FontAwesome rating example
 
- - **[required]**: A flag indicating if rating is required for form validation. default `false`.
+```html
+<bar-rating [(rate)]="rate" [max]="5">
+  <ng-template ratingActive>
+    <i class="bi bi-star-fill" style="margin: 2px; color: #edb867"></i>
+  </ng-template>
+  <ng-template ratingInactive>
+    <i class="bi bi-star-fill" style="margin: 2px; color: #d2d2d2"></i>
+  </ng-template>
+</bar-rating>
+```
 
- - **[disabled]**: A flag indicating if rating is disabled. works only with forms, default `false`.
+#### Bootstrap rating example
 
- - **(rateChange)**: An event fired when a user selects a new rating.
+```html
+<bar-rating [rate]="rate" (rateChange)="onFaoRate($event)" [max]="10">
+  <ng-template ratingInactive>
+    <fa-icon [icon]="['far', 'star']" [fixedWidth]="true" size="lg" style="color: #d2d2d2"></fa-icon>
+  </ng-template>
+  <ng-template ratingActive>
+    <fa-icon [icon]="['fas', 'star']" [fixedWidth]="true" size="lg" style="color: #50e3c2"></fa-icon>
+  </ng-template>
+  <ng-template ratingFraction>
+    <fa-icon [icon]="['fas', 'star-half-alt']" [fixedWidth]="true" size="lg" style="color: #50e3c2"></fa-icon>
+  </ng-template>
+</bar-rating>
+```
 
-   *Event's payload equals to the newly selected rating.*
-
- - **(hover)**: An event fired when a user is hovering over a given rating.
-
-   *Event's payload equals to the rating being hovered over.*
-
- - **(leave)**: An event fired when a user stops hovering over a given rating.
-
-   *Event's payload equals to the rating of the last item being hovered over.*
-
-
 #### Movie rating example
@@ -96,6 +125,6 @@
 <bar-rating [(rate)]="rate" [max]="4" [theme]="'movie'" [showText]="true"
- [titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"></bar-rating>
+            [titles]="['Bad', 'Mediocre' , 'Good', 'Awesome']"></bar-rating>
 ```
 
-It can be used with angular forms and reactive forms, for example:
+It can be used with Angular forms:
 
@@ -110,46 +139,40 @@ ```html
 
-<a name="themes"/>
+And reactive forms:
 
-## Predefined themes
-
-Add the rating theme either in `index.html`
-
 ```html
-<link rel="stylesheet" href="../node_modules/ngx-bar-rating/themes/br-default-theme.css"/>
+<form [formGroup]="ratingForm">
+  <bar-rating formControlName="rate" [max]="4" required disabled></bar-rating>
+</form>
+<p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
+<pre>{{ formRating }}</pre>
 ```
 
-Or in the global style `style.scss` (recommended)
+## CSS variables
 
+- `--br-font-size` Sets the size of the star.
+- `--br-gap` Sets the gap between the stars.
+- `--br-active-color` Sets active color.
+- `--br-inactive-color` Sets inactive color.
 
- - Pure css stars (default) `[theme]="'default'"`
+<a name="themes"/>
 
-```css
-@import '~ngx-bar-rating/themes/br-default-theme'
-```
+## Predefined themes
 
- - Bootstrap stars `[theme]="'bootstrap'"`
+> If you want to use a custom rating template, you don't need to import any CSS theme.
 
-```css
-@import '~ngx-bar-rating/themes/br-bootstrap-theme';
-```
+If you want to use one of the predefined themes, you will need to import it in the global style `style.scss`
 
-- Fontawesome stars `[theme]="'fontawesome'"`
+- Pure CSS stars (default) `[theme]="'default'"`
 
 ```css
-@import '~ngx-bar-rating/themes/br-fontawesome-theme';
+@import '~ngx-bar-rating/themes/br-default-theme'
 ```
 
- - Fontawesome-o stars `[theme]="'fontawesome-o'"`
+- Horizontal bars `[theme]="'horizontal'"`
 
 ```css
-@import '~ngx-bar-rating/themes/br-fontawesome-o-theme';
-```
-
- - Horizontal bars `[theme]="'horizontal'"`
-
-```css
 @import '~ngx-bar-rating/themes/br-horizontal-theme';
 ```
 
- - Vertical bars `[theme]="'vertical'"`
+- Vertical bars `[theme]="'vertical'"`
 
@@ -160,3 +183,3 @@ ```css
 
- - Custom stars `[theme]="'stars'"`
+- Custom stars `[theme]="'stars'"`
 
@@ -167,3 +190,4 @@ ```css
 
- - Movie rating `[theme]="'movie'"`
+- Movie rating `[theme]="'movie'"`
+
 ```css
@@ -173,3 +197,3 @@ @import '~ngx-bar-rating/themes/br-movie-theme';
 
- - Square rating `[theme]="'square'"`
+- Square rating `[theme]="'square'"`
 
@@ -184,15 +208,14 @@ ```css
 
-*If you have a nice rating style you would like to share, prupose your theme and I will include it in the package.*
-
-
 ## Issues
 
-If you identify any errors in this component, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-bar-rating/issues). I am excited to see what the community thinks of this project, and I would love your input!
+If you identify any errors in this component, or have an idea for an improvement, please open
+an [issue](https://github.com/MurhafSousli/ngx-bar-rating/issues). I am excited to see what the community thinks of this
+project, and I would love your input!
 
 ## Author
 
- **Murhaf Sousli**
+**Murhaf Sousli**
 
- - [github/murhafsousli](https://github.com/MurhafSousli)
- - [twitter/murhafsousli](https://twitter.com/MurhafSousli)
+- [github/murhafsousli](https://github.com/MurhafSousli)
+- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119530

increased by24.35%

Lines of code

1009

increased by51.96%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

213

increased by12.11%

Worsened metrics

Dependency count

4

increased by33.33%

Number of package files

24

decreased by-22.58%

Number of low supply chain risk alerts

6

increased byInfinity%

Dependency changes

• + Added@angular/common@19.0.5(transitive)

• + Added@angular/core@19.0.5(transitive)

• + Addedrxjs@7.8.1(transitive)

• + Addedzone.js@0.15.0(transitive)

• - Removed@angular/common@10.2.5(transitive)

• - Removed@angular/core@10.2.5(transitive)

• - Removedrxjs@6.6.7(transitive)

• - Removedtslib@1.14.1(transitive)

• - Removedzone.js@0.10.3(transitive)

• Updatedtslib@^2.3.1