@obliczeniowo/elementary
Version:
Library made in Angular version 20
106 lines (101 loc) • 9.47 kB
JavaScript
import * as i0 from '@angular/core';
import { input, model, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CommonModule } from '@angular/common';
class StarRatingComponent {
nrOfStars = input(5);
rating = model(0);
disabled = input();
displayValue = input(true);
touched = false;
_size = 20;
get size() {
return this._size;
}
set size(size) {
this.matrix = new DOMMatrix([1, 0, 0, 1, 0, 0]);
this._size = size;
}
hoverRating = 0;
matrix = new DOMMatrix([1, 0, 0, 1, 0, 0]);
onChange = (rating) => { };
onTouched = () => { };
registerOnValidatorChange(fn) { this.onChange = fn; }
writeValue(rating) {
this.rating.set(rating);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
markAsTouched() {
if (!this.touched) {
this.onTouched();
this.touched = true;
}
}
setValue() {
this.markAsTouched();
this.rating.set(this.rating());
this.onChange(this.rating());
}
getTable() {
const table = [];
for (let i = 0; i < this.nrOfStars(); i++) {
table.push(i);
}
return table;
}
clicked(rating) {
if (this.disabled()) {
return;
}
this.rating.set(rating);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: StarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: StarRatingComponent, isStandalone: false, selector: "obl-star-rating", inputs: { nrOfStars: { classPropertyName: "nrOfStars", publicName: "nrOfStars", isSignal: true, isRequired: false, transformFunction: null }, rating: { classPropertyName: "rating", publicName: "rating", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { rating: "ratingChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: StarRatingComponent
},
], ngImport: i0, template: "<svg\n [attr.height]=\"size\"\n [attr.width]=\"size * nrOfStars()\"\n [attr.viewBox]=\"'0 0 ' + 10 * nrOfStars() + ' 10'\"\n>\n @for (i of getTable(); track i) {\n <path\n [class.selected]=\"i + 1 <= (hoverRating || rating())\"\n style=\"stroke-width: 3; stroke-linejoin: round\"\n (mouseover)=\"hoverRating = i + 1\"\n (mouseleave)=\"hoverRating = 0\"\n [attr.transform]=\"matrix.translate(i * 10, 0).toString()\"\n (click)=\"clicked(i + 1)\"\n d=\"M 5.0000001,1 6.1755705,3.381966 8.8042261,3.7639321 6.902113,5.618034 7.3511409,8.236068 4.9999999,7 2.6488589,8.2360679 3.097887,5.6180339 1.195774,3.7639319 3.8244295,3.381966 Z\"\n />\n }\n</svg>\n\n@if (displayValue()) {\n <span>{{ rating() }} / {{ nrOfStars() }}</span>\n}\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:flex;align-items:center}:host span{font-size:14px;margin-left:5px}path{fill:var(--obl-rating-color)}path.selected{fill:var(--obl-rating-selected-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: StarRatingComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-star-rating', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: StarRatingComponent
},
], standalone: false, template: "<svg\n [attr.height]=\"size\"\n [attr.width]=\"size * nrOfStars()\"\n [attr.viewBox]=\"'0 0 ' + 10 * nrOfStars() + ' 10'\"\n>\n @for (i of getTable(); track i) {\n <path\n [class.selected]=\"i + 1 <= (hoverRating || rating())\"\n style=\"stroke-width: 3; stroke-linejoin: round\"\n (mouseover)=\"hoverRating = i + 1\"\n (mouseleave)=\"hoverRating = 0\"\n [attr.transform]=\"matrix.translate(i * 10, 0).toString()\"\n (click)=\"clicked(i + 1)\"\n d=\"M 5.0000001,1 6.1755705,3.381966 8.8042261,3.7639321 6.902113,5.618034 7.3511409,8.236068 4.9999999,7 2.6488589,8.2360679 3.097887,5.6180339 1.195774,3.7639319 3.8244295,3.381966 Z\"\n />\n }\n</svg>\n\n@if (displayValue()) {\n <span>{{ rating() }} / {{ nrOfStars() }}</span>\n}\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:flex;align-items:center}:host span{font-size:14px;margin-left:5px}path{fill:var(--obl-rating-color)}path.selected{fill:var(--obl-rating-selected-color)}\n"] }]
}], propDecorators: { size: [{
type: Input
}] } });
class RatingModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: RatingModule, declarations: [StarRatingComponent], imports: [CommonModule], exports: [StarRatingComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RatingModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RatingModule, decorators: [{
type: NgModule,
args: [{
declarations: [
StarRatingComponent
],
imports: [
CommonModule
],
exports: [
StarRatingComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RatingModule, StarRatingComponent };
//# sourceMappingURL=obliczeniowo-elementary-rating.mjs.map