ngx-bootstrap
Version:
Angular Bootstrap
147 lines (141 loc) • 9.57 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, forwardRef, input, output, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { 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: "21.2.0", ngImport: i0, type: RatingConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RatingConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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 = input(5, ...(ngDevMode ? [{ debugName: "max" }] : []));
/** if true will not react on any user events */
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
/** array of icons titles, default: (["one", "two", "three", "four", "five"]) */
this.titles = input([], ...(ngDevMode ? [{ debugName: "titles" }] : []));
/** custom template for icons */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.customTemplate = input(...(ngDevMode ? [undefined, { debugName: "customTemplate" }] : []));
/** fired when icon selected, $event:number equals to selected rating */
this.onHover = output();
/** fired when icon selected, $event:number equals to previous rating value */
this.onLeave = output();
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() {
const maxValue = this.max() || 5;
const titlesValue = this.titles();
const titlesArray = typeof titlesValue !== 'undefined' && titlesValue.length > 0
? titlesValue
: [];
this.range = this.buildTemplateObjects(maxValue, titlesArray);
}
// 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, titles) {
const result = [];
for (let i = 0; i < max; i++) {
result.push({
index: i,
title: titles[i] || i + 1
});
}
return result;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: RatingConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: RatingComponent, isStandalone: true, selector: "rating", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, titles: { classPropertyName: "titles", publicName: "titles", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, 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 @for (r of range; track r; 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 }\n</span>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RatingComponent, decorators: [{
type: Component,
args: [{ selector: 'rating', providers: [RATING_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [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 @for (r of range; track r; 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 }\n</span>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: RatingConfig }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], titles: [{ type: i0.Input, args: [{ isSignal: true, alias: "titles", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], onHover: [{ type: i0.Output, args: ["onHover"] }], onLeave: [{ type: i0.Output, args: ["onLeave"] }], onKeydown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class RatingModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: RatingModule, imports: [RatingComponent], exports: [RatingComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RatingModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", 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