ionic-rating
Version:
A simple Ionic 4 stars rating component using Angular, with an easy API and support for all methods of binding (Property and Event Binding, Template Forms and Reactive Forms).
2 lines • 3.1 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("@ionic/angular")):"function"==typeof define&&define.amd?define("ionic-rating",["exports","@angular/core","@angular/forms","@angular/common","@ionic/angular"],t):t((e=e||self)["ionic-rating"]={},e.ng.core,e.ng.forms,e.ng.common,e.angular)}(this,function(e,t,o,n,r){"use strict";var i=function(){function e(e){this.cd=e,this.hover=new t.EventEmitter,this.leave=new t.EventEmitter,this.rateChange=new t.EventEmitter}return e.prototype.ngOnChanges=function(e){e.rate&&this.update(this.rate)},e.prototype.update=function(e,t){void 0===t&&(t=!0),this.readonly||this.disabled||this.rate===e||(this.rate=e,this.rateChange.emit(this.rate)),t&&(this.onChange&&this.onChange(this.rate),this.onTouched&&this.onTouched())},e.prototype.onClick=function(e){this.update(this.resettable&&this.rate===e?0:e)},e.prototype.onMouseEnter=function(e){this.disabled||this.readonly||(this.hoverRate=e),this.hover.emit(e)},e.prototype.onMouseLeave=function(){this.leave.emit(this.hoverRate),this.hoverRate=0},e.prototype.onBlur=function(){this.onTouched&&this.onTouched()},e.prototype.writeValue=function(e){this.update(e,!1),this.cd.markForCheck()},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.decorators=[{type:t.Component,args:[{selector:"ion-rating",template:'<ion-button *ngFor="let i of [1, 2, 3, 4, 5]" type="button" fill="clear" [disabled]="disabled || readonly"\n (mouseenter)="onMouseEnter(i)" (click)="onClick(i)" [class.filled]="i <= hoverRate || (!hoverRate && i <= rate)"\n [class.readonly]="readonly">\n <ion-icon slot="icon-only" name="star" [size]="size">\n </ion-icon>\n</ion-button>',changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return e}),multi:!0}],styles:[":host{--star-color:gray;--star-color-filled:orange;display:inline-block}ion-button{--padding-start:0;--padding-end:0;--color:var(--star-color);--color-focused:var(--star-color);--color-activated:var(--star-color)}ion-button.filled{--color:var(--star-color-filled);--color-focused:var(--star-color-filled);--color-activated:var(--star-color-filled)}ion-button.readonly{--opacity:1}"]}]}],e.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},e.propDecorators={rate:[{type:t.Input}],readonly:[{type:t.Input}],resettable:[{type:t.Input}],size:[{type:t.Input}],hover:[{type:t.Output}],leave:[{type:t.Output}],rateChange:[{type:t.Output}],onMouseLeave:[{type:t.HostListener,args:["mouseleave",[]]}],onBlur:[{type:t.HostListener,args:["blur",[]]}]},e}(),a=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,r.IonicModule],exports:[i],declarations:[i]}]}],e}();e.IonRatingComponent=i,e.IonicRatingModule=a,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ionic-rating.umd.min.js.map