ngx-bootstrap
Version:
Angular Bootstrap
163 lines (157 loc) • 9.07 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgFor, NgTemplateOutlet } from '@angular/common';
/** Default values provider for rating */
class RatingConfig {
constructor() {
/** aria label for rating */
this.ariaLabel = 'rating';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
const RATING_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
};
class RatingComponent {
constructor(changeDetection, config) {
this.changeDetection = changeDetection;
/** number of icons */
this.max = 5;
/** if true will not react on any user events */
this.readonly = false;
/** array of icons titles, default: (["one", "two", "three", "four", "five"]) */
this.titles = [];
/** fired when icon selected, $event:number equals to selected rating */
this.onHover = new EventEmitter();
/** fired when icon selected, $event:number equals to previous rating value */
this.onLeave = new EventEmitter();
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
/** aria label for rating */
this.ariaLabel = 'rating';
this.range = [];
this.value = 0;
Object.assign(this, config);
}
onKeydown(event) {
if ([37, 38, 39, 40].indexOf(event.which) === -1) {
return;
}
event.preventDefault();
event.stopPropagation();
const sign = event.which === 38 || event.which === 39 ? 1 : -1;
this.rate(this.value + sign);
}
ngOnInit() {
this.max = this.max || 5;
this.titles =
typeof this.titles !== 'undefined' && this.titles.length > 0
? this.titles
: [];
this.range = this.buildTemplateObjects(this.max);
}
// model -> view
writeValue(value) {
if (value % 1 !== value) {
this.value = Math.round(value);
this.preValue = value;
this.changeDetection.markForCheck();
return;
}
this.preValue = value;
this.value = value;
this.changeDetection.markForCheck();
}
enter(value) {
if (!this.readonly) {
this.value = value;
this.changeDetection.markForCheck();
this.onHover.emit(value);
}
}
reset() {
if (typeof this.preValue === 'number') {
this.value = Math.round(this.preValue);
this.changeDetection.markForCheck();
this.onLeave.emit(this.value);
}
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
rate(value) {
if (!this.readonly && this.range
&& value >= 0 && value <= this.range.length) {
this.writeValue(value);
this.onChange(value);
}
}
buildTemplateObjects(max) {
const result = [];
for (let i = 0; i < max; i++) {
result.push({
index: i,
title: this.titles[i] || i + 1
});
}
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: RatingConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: RatingComponent, isStandalone: true, selector: "rating", inputs: { max: "max", readonly: "readonly", titles: "titles", customTemplate: "customTemplate" }, outputs: { onHover: "onHover", onLeave: "onLeave" }, host: { listeners: { "keydown": "onKeydown($event)" } }, providers: [RATING_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span (mouseleave)=\"reset()\" (keydown)=\"onKeydown($event)\" tabindex=\"0\"\n role=\"slider\" aria-valuemin=\"0\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-valuemax]=\"range.length\"\n [attr.aria-valuenow]=\"value\">\n <ng-template #star let-value=\"value\" let-index=\"index\">{{ index < value ? '★' : '☆' }}</ng-template>\n <ng-template ngFor let-r [ngForOf]=\"range\" let-index=\"index\">\n <span class=\"sr-only visually-hidden\">({{ index < value ? '*' : ' ' }})</span>\n <span class=\"bs-rating-star\"\n (mouseenter)=\"enter(index + 1)\"\n (click)=\"rate(index + 1)\"\n [title]=\"r.title\"\n [style.cursor]=\"readonly ? 'default' : 'pointer'\"\n [class.active]=\"index < value\">\n <ng-template [ngTemplateOutlet]=\"customTemplate || star\"\n [ngTemplateOutletContext]=\"{index: index, value: value}\">\n </ng-template>\n </span>\n </ng-template>\n</span>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingComponent, decorators: [{
type: Component,
args: [{ selector: 'rating', providers: [RATING_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor, NgTemplateOutlet], template: "<span (mouseleave)=\"reset()\" (keydown)=\"onKeydown($event)\" tabindex=\"0\"\n role=\"slider\" aria-valuemin=\"0\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-valuemax]=\"range.length\"\n [attr.aria-valuenow]=\"value\">\n <ng-template #star let-value=\"value\" let-index=\"index\">{{ index < value ? '★' : '☆' }}</ng-template>\n <ng-template ngFor let-r [ngForOf]=\"range\" let-index=\"index\">\n <span class=\"sr-only visually-hidden\">({{ index < value ? '*' : ' ' }})</span>\n <span class=\"bs-rating-star\"\n (mouseenter)=\"enter(index + 1)\"\n (click)=\"rate(index + 1)\"\n [title]=\"r.title\"\n [style.cursor]=\"readonly ? 'default' : 'pointer'\"\n [class.active]=\"index < value\">\n <ng-template [ngTemplateOutlet]=\"customTemplate || star\"\n [ngTemplateOutletContext]=\"{index: index, value: value}\">\n </ng-template>\n </span>\n </ng-template>\n</span>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: RatingConfig }], propDecorators: { max: [{
type: Input
}], readonly: [{
type: Input
}], titles: [{
type: Input
}], customTemplate: [{
type: Input
}], onHover: [{
type: Output
}], onLeave: [{
type: Output
}], onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class RatingModule {
// @deprecated method not required anymore, will be deleted in v19.0.0
static forRoot() {
return {
ngModule: RatingModule,
providers: []
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: RatingModule, imports: [RatingComponent], exports: [RatingComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RatingModule, decorators: [{
type: NgModule,
args: [{
imports: [RatingComponent],
exports: [RatingComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RatingComponent, RatingConfig, RatingModule };
//# sourceMappingURL=ngx-bootstrap-rating.mjs.map