ngx-input-star-rating - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

bundles/ngx-input-star-rating.umd.js

@@ -105,4 +105,4 @@ (function (global, factory) {
                 selector: 'ngx-input-star-rating',
-                template: "<div class=\"input-rating\" (mouseleave)=\"mouseLeave()\">\n  <button type=\"button\" [disabled]=\"disabled\" *ngFor=\"let btn of buttons; let i = index\" class=\"input-rating__btn\" (click)=\"rate(i)\"\n    (mouseenter)=\"mouseEnter(i)\">\n    <span *ngIf=\"btn.active || btn.icon === starIcons.full\" class=\"full\">\n      <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n    </span>\n    <ng-container *ngIf=\"!btn.active\">\n      <span *ngIf=\"btn.icon === starIcons.half\" class=\"half\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n      <span *ngIf=\"btn.icon !== starIcons.full && btn.icon !== starIcons.half\" class=\"empty\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n<ng-template #star>\n  <svg height=\"25\" width=\"23\" class=\"star rating\" data-rating=\"1\">\n    <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n  </svg>\n</ng-template>",
-                styles: [":host{\n  display:inline-block; }\n.star{\n  fill:#ccc; }\n.full .star, .half .star{\n  fill:gold; }\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer; }\n"],
+                template: "<div class=\"input-rating\" (mouseleave)=\"mouseLeave()\">\n  <button type=\"button\" [disabled]=\"disabled\" *ngFor=\"let btn of buttons; let i = index\" class=\"input-rating__btn\" (click)=\"rate(i)\" [attr.aria-label]=\"'rate ' + (i + 1) + ' of ' + buttons.length\"\n    (mouseenter)=\"mouseEnter(i)\">\n    <span *ngIf=\"btn.active || btn.icon === starIcons.full\" class=\"full\">\n      <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n    </span>\n    <ng-container *ngIf=\"!btn.active\">\n      <span *ngIf=\"btn.icon === starIcons.half\" class=\"half\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n        <svg height=\"25\" width=\"10\" class=\"star-half\">\n          <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"btn.icon !== starIcons.full && btn.icon !== starIcons.half\" class=\"empty\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n<ng-template #star>\n  <svg height=\"25\" width=\"23\" class=\"star\">\n    <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n  </svg>\n</ng-template>",
+                styles: ["*, *::before, *::after{\n  -webkit-box-sizing:border-box;\n          box-sizing:border-box; }\n:host{\n  display:inline-block; }\n.star{\n  fill:#ccc; }\n.full .star{\n  fill:gold; }\n.half .star-half{\n  fill:gold; }\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer;\n  position:relative;\n  width:30px;\n  height:25px; }\n  button svg{\n    position:absolute;\n    top:0;\n    left:5px; }\n"],
                 providers: [
@@ -109,0 +109,0 @@ {

bundles/ngx-input-star-rating.umd.min.js

@@ -1,2 +0,2 @@
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/common"],t):t(n["ngx-input-star-rating"]={},n.ng.core,n.ng.forms,n.ng.common)}(this,function(n,t,e,o){"use strict";var a={outline:"outline",full:"full",half:"half"},r=function(){function n(){this._value=0,this.count=5,this.disabled=!1,this.starIcons=a,this.buttons=[],this.onChange=function(n){},this.onTouched=function(){}}return Object.defineProperty(n.prototype,"value",{get:function(){return this._value},set:function(n){this._value=n,this.onChange(n),this.valueUpdate(this._value),this.onTouched()},enumerable:!0,configurable:!0}),n.prototype.registerOnChange=function(n){this.onChange=n},n.prototype.registerOnTouched=function(n){this.onTouched=n},n.prototype.writeValue=function(n){n!==this.value&&(this.value=n)},n.prototype.ngOnInit=function(){for(var n=0;n<this.count;n++)this.buttons.push({active:!1,icon:a.outline});this.valueUpdate(this.value)},n.prototype.ngOnChanges=function(n){n.value&&n.value.currentValue&&this.valueUpdate(n.value.currentValue)},n.prototype.rate=function(e){this.buttons.forEach(function(n,t){n.icon=t<=e?a.full:a.outline});var n=this.buttons.reduce(function(n,t){return t.icon===a.full?n+1:n},0);this.value=n},n.prototype.mouseEnter=function(e){this.buttons.forEach(function(n,t){n.active=t<=e})},n.prototype.mouseLeave=function(){this.buttons.forEach(function(n){return n.active=!1})},n.prototype.valueUpdate=function(o){this.buttons.forEach(function(n,t){var e=t+1;e<=o&&(n.icon=a.full),e-.5<=o&&o<e&&(n.icon=a.half)})},n}();r.decorators=[{type:t.Component,args:[{selector:"ngx-input-star-rating",template:'<div class="input-rating" (mouseleave)="mouseLeave()">\n  <button type="button" [disabled]="disabled" *ngFor="let btn of buttons; let i = index" class="input-rating__btn" (click)="rate(i)"\n    (mouseenter)="mouseEnter(i)">\n    <span *ngIf="btn.active || btn.icon === starIcons.full" class="full">\n      <ng-container *ngTemplateOutlet="star"></ng-container>\n    </span>\n    <ng-container *ngIf="!btn.active">\n      <span *ngIf="btn.icon === starIcons.half" class="half">\n        <ng-container *ngTemplateOutlet="star"></ng-container>\n      </span>\n      <span *ngIf="btn.icon !== starIcons.full && btn.icon !== starIcons.half" class="empty">\n        <ng-container *ngTemplateOutlet="star"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n<ng-template #star>\n  <svg height="25" width="23" class="star rating" data-rating="1">\n    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>\n  </svg>\n</ng-template>',styles:[":host{\n  display:inline-block; }\n.star{\n  fill:#ccc; }\n.full .star, .half .star{\n  fill:gold; }\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer; }\n"],providers:[{provide:e.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return r}),multi:!0}]}]}],r.ctorParameters=function(){return[]},r.propDecorators={_value:[{type:t.Input,args:["value"]}],count:[{type:t.Input}],disabled:[{type:t.Input}]};var i=function(){};i.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule],declarations:[r],exports:[r]}]}],i.ctorParameters=function(){return[]},n.NgxInputStarRatingModule=i,n.ɵa=r,Object.defineProperty(n,"__esModule",{value:!0})});
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/common"],t):t(n["ngx-input-star-rating"]={},n.ng.core,n.ng.forms,n.ng.common)}(this,function(n,t,e,o){"use strict";var r={outline:"outline",full:"full",half:"half"},a=function(){function n(){this._value=0,this.count=5,this.disabled=!1,this.starIcons=r,this.buttons=[],this.onChange=function(n){},this.onTouched=function(){}}return Object.defineProperty(n.prototype,"value",{get:function(){return this._value},set:function(n){this._value=n,this.onChange(n),this.valueUpdate(this._value),this.onTouched()},enumerable:!0,configurable:!0}),n.prototype.registerOnChange=function(n){this.onChange=n},n.prototype.registerOnTouched=function(n){this.onTouched=n},n.prototype.writeValue=function(n){n!==this.value&&(this.value=n)},n.prototype.ngOnInit=function(){for(var n=0;n<this.count;n++)this.buttons.push({active:!1,icon:r.outline});this.valueUpdate(this.value)},n.prototype.ngOnChanges=function(n){n.value&&n.value.currentValue&&this.valueUpdate(n.value.currentValue)},n.prototype.rate=function(e){this.buttons.forEach(function(n,t){n.icon=t<=e?r.full:r.outline});var n=this.buttons.reduce(function(n,t){return t.icon===r.full?n+1:n},0);this.value=n},n.prototype.mouseEnter=function(e){this.buttons.forEach(function(n,t){n.active=t<=e})},n.prototype.mouseLeave=function(){this.buttons.forEach(function(n){return n.active=!1})},n.prototype.valueUpdate=function(o){this.buttons.forEach(function(n,t){var e=t+1;e<=o&&(n.icon=r.full),e-.5<=o&&o<e&&(n.icon=r.half)})},n}();a.decorators=[{type:t.Component,args:[{selector:"ngx-input-star-rating",template:'<div class="input-rating" (mouseleave)="mouseLeave()">\n  <button type="button" [disabled]="disabled" *ngFor="let btn of buttons; let i = index" class="input-rating__btn" (click)="rate(i)" [attr.aria-label]="\'rate \' + (i + 1) + \' of \' + buttons.length"\n    (mouseenter)="mouseEnter(i)">\n    <span *ngIf="btn.active || btn.icon === starIcons.full" class="full">\n      <ng-container *ngTemplateOutlet="star"></ng-container>\n    </span>\n    <ng-container *ngIf="!btn.active">\n      <span *ngIf="btn.icon === starIcons.half" class="half">\n        <ng-container *ngTemplateOutlet="star"></ng-container>\n        <svg height="25" width="10" class="star-half">\n          <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>\n        </svg>\n      </span>\n      <span *ngIf="btn.icon !== starIcons.full && btn.icon !== starIcons.half" class="empty">\n        <ng-container *ngTemplateOutlet="star"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n<ng-template #star>\n  <svg height="25" width="23" class="star">\n    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>\n  </svg>\n</ng-template>',styles:["*, *::before, *::after{\n  -webkit-box-sizing:border-box;\n          box-sizing:border-box; }\n:host{\n  display:inline-block; }\n.star{\n  fill:#ccc; }\n.full .star{\n  fill:gold; }\n.half .star-half{\n  fill:gold; }\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer;\n  position:relative;\n  width:30px;\n  height:25px; }\n  button svg{\n    position:absolute;\n    top:0;\n    left:5px; }\n"],providers:[{provide:e.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return a}),multi:!0}]}]}],a.ctorParameters=function(){return[]},a.propDecorators={_value:[{type:t.Input,args:["value"]}],count:[{type:t.Input}],disabled:[{type:t.Input}]};var i=function(){};i.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule],declarations:[a],exports:[a]}]}],i.ctorParameters=function(){return[]},n.NgxInputStarRatingModule=i,n.ɵa=a,Object.defineProperty(n,"__esModule",{value:!0})});
 //# sourceMappingURL=ngx-input-star-rating.umd.min.js.map

esm2015/ngx-input-star-rating.js

@@ -146,3 +146,3 @@ import { forwardRef, Component, Input, NgModule } from '@angular/core';
                 template: `<div class="input-rating" (mouseleave)="mouseLeave()">
-  <button type="button" [disabled]="disabled" *ngFor="let btn of buttons; let i = index" class="input-rating__btn" (click)="rate(i)"
+  <button type="button" [disabled]="disabled" *ngFor="let btn of buttons; let i = index" class="input-rating__btn" (click)="rate(i)" [attr.aria-label]="'rate ' + (i + 1) + ' of ' + buttons.length"
     (mouseenter)="mouseEnter(i)">
@@ -155,2 +155,5 @@ <span *ngIf="btn.active || btn.icon === starIcons.full" class="full">
         <ng-container *ngTemplateOutlet="star"></ng-container>
+        <svg height="25" width="10" class="star-half">
+          <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
+        </svg>
       </span>
@@ -164,16 +167,28 @@ <span *ngIf="btn.icon !== starIcons.full && btn.icon !== starIcons.half" class="empty">
 <ng-template #star>
-  <svg height="25" width="23" class="star rating" data-rating="1">
+  <svg height="25" width="23" class="star">
     <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
   </svg>
 </ng-template>`,
-                styles: [`:host{
+                styles: [`*, *::before, *::after{
+  -webkit-box-sizing:border-box;
+          box-sizing:border-box; }
+:host{
   display:inline-block; }
 .star{
   fill:#ccc; }
-.full .star, .half .star{
+.full .star{
   fill:gold; }
+.half .star-half{
+  fill:gold; }
 button{
   background-color:transparent;
   border:0;
-  cursor:pointer; }
+  cursor:pointer;
+  position:relative;
+  width:30px;
+  height:25px; }
+  button svg{
+    position:absolute;
+    top:0;
+    left:5px; }
 `],
@@ -180,0 +195,0 @@ providers: [

esm5/ngx-input-star-rating.js

@@ -103,4 +103,4 @@ import { forwardRef, Component, Input, NgModule } from '@angular/core';
                 selector: 'ngx-input-star-rating',
-                template: "<div class=\"input-rating\" (mouseleave)=\"mouseLeave()\">\n  <button type=\"button\" [disabled]=\"disabled\" *ngFor=\"let btn of buttons; let i = index\" class=\"input-rating__btn\" (click)=\"rate(i)\"\n    (mouseenter)=\"mouseEnter(i)\">\n    <span *ngIf=\"btn.active || btn.icon === starIcons.full\" class=\"full\">\n      <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n    </span>\n    <ng-container *ngIf=\"!btn.active\">\n      <span *ngIf=\"btn.icon === starIcons.half\" class=\"half\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n      <span *ngIf=\"btn.icon !== starIcons.full && btn.icon !== starIcons.half\" class=\"empty\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n<ng-template #star>\n  <svg height=\"25\" width=\"23\" class=\"star rating\" data-rating=\"1\">\n    <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n  </svg>\n</ng-template>",
-                styles: [":host{\n  display:inline-block; }\n.star{\n  fill:#ccc; }\n.full .star, .half .star{\n  fill:gold; }\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer; }\n"],
+                template: "<div class=\"input-rating\" (mouseleave)=\"mouseLeave()\">\n  <button type=\"button\" [disabled]=\"disabled\" *ngFor=\"let btn of buttons; let i = index\" class=\"input-rating__btn\" (click)=\"rate(i)\" [attr.aria-label]=\"'rate ' + (i + 1) + ' of ' + buttons.length\"\n    (mouseenter)=\"mouseEnter(i)\">\n    <span *ngIf=\"btn.active || btn.icon === starIcons.full\" class=\"full\">\n      <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n    </span>\n    <ng-container *ngIf=\"!btn.active\">\n      <span *ngIf=\"btn.icon === starIcons.half\" class=\"half\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n        <svg height=\"25\" width=\"10\" class=\"star-half\">\n          <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"btn.icon !== starIcons.full && btn.icon !== starIcons.half\" class=\"empty\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n<ng-template #star>\n  <svg height=\"25\" width=\"23\" class=\"star\">\n    <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n  </svg>\n</ng-template>",
+                styles: ["*, *::before, *::after{\n  -webkit-box-sizing:border-box;\n          box-sizing:border-box; }\n:host{\n  display:inline-block; }\n.star{\n  fill:#ccc; }\n.full .star{\n  fill:gold; }\n.half .star-half{\n  fill:gold; }\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer;\n  position:relative;\n  width:30px;\n  height:25px; }\n  button svg{\n    position:absolute;\n    top:0;\n    left:5px; }\n"],
                 providers: [
@@ -107,0 +107,0 @@ {

ngx-input-star-rating.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"NgxInputStarRatingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"ngx-input-star-rating","template":"<div class=\"input-rating\" (mouseleave)=\"mouseLeave()\">\n  <button type=\"button\" [disabled]=\"disabled\" *ngFor=\"let btn of buttons; let i = index\" class=\"input-rating__btn\" (click)=\"rate(i)\"\n    (mouseenter)=\"mouseEnter(i)\">\n    <span *ngIf=\"btn.active || btn.icon === starIcons.full\" class=\"full\">\n      <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n    </span>\n    <ng-container *ngIf=\"!btn.active\">\n      <span *ngIf=\"btn.icon === starIcons.half\" class=\"half\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n      <span *ngIf=\"btn.icon !== starIcons.full && btn.icon !== starIcons.half\" class=\"empty\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template #star>\n  <svg height=\"25\" width=\"23\" class=\"star rating\" data-rating=\"1\">\n    <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n  </svg>\n</ng-template>","styles":[":host{\n  display:inline-block; }\n\n.star{\n  fill:#ccc; }\n\n.full .star, .half .star{\n  fill:gold; }\n\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer; }\n"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":49,"character":15},"useExisting":{"__symbolic":"reference","name":"ɵa"},"multi":true}]}]}],"members":{"_value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["value"]}]}],"count":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"rate":[{"__symbolic":"method"}],"mouseEnter":[{"__symbolic":"method"}],"mouseLeave":[{"__symbolic":"method"}],"valueUpdate":[{"__symbolic":"method"}]}}},"origins":{"NgxInputStarRatingModule":"./ngx-input-star-rating.module","ɵa":"./ngx-input-star-rating.component"},"importAs":"ngx-input-star-rating"}
+{"__symbolic":"module","version":4,"metadata":{"NgxInputStarRatingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"ngx-input-star-rating","template":"<div class=\"input-rating\" (mouseleave)=\"mouseLeave()\">\n  <button type=\"button\" [disabled]=\"disabled\" *ngFor=\"let btn of buttons; let i = index\" class=\"input-rating__btn\" (click)=\"rate(i)\" [attr.aria-label]=\"'rate ' + (i + 1) + ' of ' + buttons.length\"\n    (mouseenter)=\"mouseEnter(i)\">\n    <span *ngIf=\"btn.active || btn.icon === starIcons.full\" class=\"full\">\n      <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n    </span>\n    <ng-container *ngIf=\"!btn.active\">\n      <span *ngIf=\"btn.icon === starIcons.half\" class=\"half\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n        <svg height=\"25\" width=\"10\" class=\"star-half\">\n          <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"btn.icon !== starIcons.full && btn.icon !== starIcons.half\" class=\"empty\">\n        <ng-container *ngTemplateOutlet=\"star\"></ng-container>\n      </span>\n    </ng-container>\n  </button>\n</div>\n\n<ng-template #star>\n  <svg height=\"25\" width=\"23\" class=\"star\">\n    <polygon points=\"9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78\" style=\"fill-rule:nonzero;\"/>\n  </svg>\n</ng-template>","styles":["*, *::before, *::after{\n  -webkit-box-sizing:border-box;\n          box-sizing:border-box; }\n\n:host{\n  display:inline-block; }\n\n.star{\n  fill:#ccc; }\n\n.full .star{\n  fill:gold; }\n\n.half .star-half{\n  fill:gold; }\n\nbutton{\n  background-color:transparent;\n  border:0;\n  cursor:pointer;\n  position:relative;\n  width:30px;\n  height:25px; }\n  button svg{\n    position:absolute;\n    top:0;\n    left:5px; }\n"],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":66,"character":15},"useExisting":{"__symbolic":"reference","name":"ɵa"},"multi":true}]}]}],"members":{"_value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["value"]}]}],"count":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"rate":[{"__symbolic":"method"}],"mouseEnter":[{"__symbolic":"method"}],"mouseLeave":[{"__symbolic":"method"}],"valueUpdate":[{"__symbolic":"method"}]}}},"origins":{"NgxInputStarRatingModule":"./ngx-input-star-rating.module","ɵa":"./ngx-input-star-rating.component"},"importAs":"ngx-input-star-rating"}

package.json

 {
   "name": "ngx-input-star-rating",
-  "version": "0.0.2",
-  "repository": "https://github.com/coryrylan/ngx-input-star-rating",
+  "version": "0.0.3",
+  "repository": "https://github.com/coryrylan/ngx-libraries",
   "author": "Cory Rylan",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

 # ngx-input-star-rating
 
+[![npm version](https://badge.fury.io/js/ngx-input-star-rating.svg)](https://badge.fury.io/js/ngx-input-star-rating)
+
+A small star rating component compatible with both Angular Reactive Forms and Template Forms.
+
 ## [Demo](https://stackblitz.com/edit/angular-5t4gbz)
@@ -4,0 +8,0 @@

New alerts

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64377

increased by7.48%

Lines of code

585

increased by3.72%

Number of lines in readme file

82

increased by5.13%

Worsened metrics

Number of low supply chain risk alerts

4

increased by300%

No dependency changes