@guajiritos/rating
Version:
Angular Library that uses material design icons for editing and showing rating variables.
114 lines (109 loc) • 7.74 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, forwardRef, Input, Component } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i3 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class GuajiritosRating {
constructor() {
this.rating = signal(0.0);
this._config = signal({
size: '1rem',
color: 'accent',
showNumber: false,
readOnly: false,
label: '',
showClearBtn: false,
stars: 5
});
this.arrayFill = signal([]);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.propagateChange = (fn) => {
};
}
set value(value) {
if (value) {
this.rating.set(value);
}
}
set config(value) {
this.processConfig(value);
}
processConfig(value) {
this._config.set({
...this._config(),
...value
});
const stars = this._config()?.stars;
if (stars) {
this.arrayFill.set(Array.from({ length: stars }, (_, index) => index + 1));
}
}
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched() {
}
writeValue(value) {
if (value !== undefined && value !== '') {
this.rating.set(value);
}
}
onMark(item) {
if (this._config()?.readOnly) {
return;
}
if (item !== this.rating()) {
this.rating.set(+item);
}
else {
this.rating.set(this.rating() - 0.5);
}
this.propagateChange(this.rating());
}
onClear() {
if (this._config()?.readOnly) {
return;
}
this.rating.set(0.0);
this.propagateChange(this.rating());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GuajiritosRating, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: GuajiritosRating, isStandalone: true, selector: "guajiritos-rating", inputs: { value: "value", config: "config" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => GuajiritosRating),
multi: true
}
], ngImport: i0, template: "<div class=\"container-stars\">\n @if (_config().showClearBtn) {\n <mat-icon (click)=\"onClear()\" class=\"clear-btn\"\n [ngStyle]=\"{'width': _config()?.size,'height': _config()?.size,'font-size': _config()?.size,'cursor':(!_config()?.readOnly) ? 'pointer' : 'initial'}\">\n cancel\n </mat-icon>\n }\n\n @for (item of arrayFill(); track item) {\n <mat-icon (click)=\"onMark(item)\" class=\"icon-star\" [matTooltip]=\"item +' '+ _config()?.label\"\n [ngClass]=\"{'star-empty':!(rating() < item && rating()> (item-1)) && (rating() < item), 'primary': _config()?.color === 'primary', 'accent': _config()?.color === 'accent', 'warn': _config()?.color === 'warn'}\"\n [ngStyle]=\"{'width': _config().size,'height': _config().size,'font-size':_config().size,'cursor':(!_config().readOnly)?'pointer':'initial'}\">\n @if (rating() >= item) {\n star\n }\n @if ((rating() < item && rating() > (item - 1))) {\n star_half\n } @else {\n @if (rating() < item) {\n star_border\n }\n }\n </mat-icon>\n }\n\n @if (_config()?.showNumber) {\n <span style=\"transform: scale(0.8);\" [ngStyle]=\"{'fontSize':_config()?.size}\">{{ rating() }}</span>\n }\n</div>\n", styles: [".container-stars{display:flex;flex-direction:row;align-items:center}.container-stars .icon-star{font-size:1rem;width:1rem;height:1rem;cursor:pointer}.container-stars .star-empty{color:#ddd}.container-stars .clear-btn{opacity:0;font-size:1rem;width:1rem;height:1rem;cursor:pointer}.container-stars:hover .clear-btn{transform:scale(.9);opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GuajiritosRating, decorators: [{
type: Component,
args: [{ selector: 'guajiritos-rating', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => GuajiritosRating),
multi: true
}
], imports: [
CommonModule,
MatIconModule,
MatTooltipModule
], template: "<div class=\"container-stars\">\n @if (_config().showClearBtn) {\n <mat-icon (click)=\"onClear()\" class=\"clear-btn\"\n [ngStyle]=\"{'width': _config()?.size,'height': _config()?.size,'font-size': _config()?.size,'cursor':(!_config()?.readOnly) ? 'pointer' : 'initial'}\">\n cancel\n </mat-icon>\n }\n\n @for (item of arrayFill(); track item) {\n <mat-icon (click)=\"onMark(item)\" class=\"icon-star\" [matTooltip]=\"item +' '+ _config()?.label\"\n [ngClass]=\"{'star-empty':!(rating() < item && rating()> (item-1)) && (rating() < item), 'primary': _config()?.color === 'primary', 'accent': _config()?.color === 'accent', 'warn': _config()?.color === 'warn'}\"\n [ngStyle]=\"{'width': _config().size,'height': _config().size,'font-size':_config().size,'cursor':(!_config().readOnly)?'pointer':'initial'}\">\n @if (rating() >= item) {\n star\n }\n @if ((rating() < item && rating() > (item - 1))) {\n star_half\n } @else {\n @if (rating() < item) {\n star_border\n }\n }\n </mat-icon>\n }\n\n @if (_config()?.showNumber) {\n <span style=\"transform: scale(0.8);\" [ngStyle]=\"{'fontSize':_config()?.size}\">{{ rating() }}</span>\n }\n</div>\n", styles: [".container-stars{display:flex;flex-direction:row;align-items:center}.container-stars .icon-star{font-size:1rem;width:1rem;height:1rem;cursor:pointer}.container-stars .star-empty{color:#ddd}.container-stars .clear-btn{opacity:0;font-size:1rem;width:1rem;height:1rem;cursor:pointer}.container-stars:hover .clear-btn{transform:scale(.9);opacity:1}\n"] }]
}], propDecorators: { value: [{
type: Input
}], config: [{
type: Input,
args: [{ required: true }]
}] } });
/*
* Public API Surface of guachos-rating
*/
/**
* Generated bundle index. Do not edit.
*/
export { GuajiritosRating };
//# sourceMappingURL=guajiritos-rating.mjs.map