design-angular-kit
Version:
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
50 lines • 10.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
import { TranslateModule } from '@ngx-translate/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ItIconComponent } from '../../utils/icon/icon.component';
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
import * as i2 from "@angular/forms";
export class ItRatingComponent extends ItAbstractFormComponent {
constructor() {
super(...arguments);
/**
* Number of stars to show
* @default 5
*/
this.starCount = 5;
this.stars = this.generateStars();
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
if (changes['starCount'] || !this.stars.length) {
this.stars = this.generateStars();
}
}
ngOnInit() {
super.ngOnInit();
if (!this.control.value && !!this.value) {
this.writeValue(this.value);
this.onChange(this.value);
}
}
/**
* Generate the array of stars
* @private
*/
generateStars() {
return Array.from({ length: this.starCount }, (_, i) => i + 1).reverse();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItRatingComponent, isStandalone: true, selector: "it-rating", inputs: { value: "value", starCount: "starCount" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n <legend>\n <span>{{ label }}</span>\n <span class=\"visually-hidden\">\n {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n </span>\n </legend>\n\n @for (starValue of stars; track starValue) {\n <input\n [id]=\"id + '-' + starValue\"\n type=\"radio\"\n [name]=\"id\"\n [value]=\"starValue\"\n [attr.aria-hidden]=\"control.disabled\"\n [formControl]=\"control\" />\n <label class=\"full\" [for]=\"id + '-' + starValue\">\n <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n <span class=\"visually-hidden\">\n {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n </span>\n </label>\n }\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "title", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItRatingComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'it-rating', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ReactiveFormsModule, ItIconComponent], template: "<fieldset class=\"rating\" [class.rating-label]=\"!!label\" [class.rating-read-only]=\"control.disabled\">\n <legend>\n <span>{{ label }}</span>\n <span class=\"visually-hidden\">\n {{ 'it.core.rating-star' | translate: { current: control.value || 0, total: stars.length } }}\n </span>\n </legend>\n\n @for (starValue of stars; track starValue) {\n <input\n [id]=\"id + '-' + starValue\"\n type=\"radio\"\n [name]=\"id\"\n [value]=\"starValue\"\n [attr.aria-hidden]=\"control.disabled\"\n [formControl]=\"control\" />\n <label class=\"full\" [for]=\"id + '-' + starValue\">\n <it-icon name=\"star-full\" size=\"sm\" aria-hidden=\"true\"></it-icon>\n <span class=\"visually-hidden\">\n {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}\n </span>\n </label>\n }\n</fieldset>\n" }]
}], propDecorators: { value: [{
type: Input
}], starCount: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9yYXRpbmcvcmF0aW5nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9yYXRpbmcvcmF0aW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUM1RyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUNyRixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOzs7O0FBU2xFLE1BQU0sT0FBTyxpQkFBa0IsU0FBUSx1QkFBa0Q7SUFQekY7O1FBYUU7OztXQUdHO1FBQ00sY0FBUyxHQUFXLENBQUMsQ0FBQztRQUVyQixVQUFLLEdBQWtCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztLQTBCdkQ7SUF4QlUsV0FBVyxDQUFDLE9BQXNCO1FBQ3pDLEtBQUssQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFM0IsSUFBSSxPQUFPLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQy9DLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3BDLENBQUM7SUFDSCxDQUFDO0lBRVEsUUFBUTtRQUNmLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUVqQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUN4QyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM1QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM1QixDQUFDO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNLLGFBQWE7UUFDbkIsT0FBTyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUMzRSxDQUFDOzhHQXJDVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixxS0NiOUIsdzNCQXdCQSwyQ0RiWSxlQUFlLDJGQUFFLG1CQUFtQiw2eEJBQUUsZUFBZTs7MkZBRXBELGlCQUFpQjtrQkFQN0IsU0FBUztpQ0FDSSxJQUFJLFlBQ04sV0FBVyxtQkFFSix1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsZUFBZSxFQUFFLG1CQUFtQixFQUFFLGVBQWUsQ0FBQzs4QkFNdkQsS0FBSztzQkFBYixLQUFLO2dCQU1HLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEl0QWJzdHJhY3RGb3JtQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vLi4vYWJzdHJhY3RzL2Fic3RyYWN0LWZvcm0uY29tcG9uZW50JztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEl0SWNvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL3V0aWxzL2ljb24vaWNvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdpdC1yYXRpbmcnLFxuICB0ZW1wbGF0ZVVybDogJy4vcmF0aW5nLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGltcG9ydHM6IFtUcmFuc2xhdGVNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUsIEl0SWNvbkNvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIEl0UmF0aW5nQ29tcG9uZW50IGV4dGVuZHMgSXRBYnN0cmFjdEZvcm1Db21wb25lbnQ8bnVtYmVyIHwgbnVsbCB8IHVuZGVmaW5lZD4gaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIC8qKlxuICAgKiBUaGUgcmF0aW5nIHZhbHVlXG4gICAqL1xuICBASW5wdXQoKSB2YWx1ZTogbnVtYmVyIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBOdW1iZXIgb2Ygc3RhcnMgdG8gc2hvd1xuICAgKiBAZGVmYXVsdCA1XG4gICAqL1xuICBASW5wdXQoKSBzdGFyQ291bnQ6IG51bWJlciA9IDU7XG5cbiAgcHJvdGVjdGVkIHN0YXJzOiBBcnJheTxudW1iZXI+ID0gdGhpcy5nZW5lcmF0ZVN0YXJzKCk7XG5cbiAgb3ZlcnJpZGUgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIHN1cGVyLm5nT25DaGFuZ2VzKGNoYW5nZXMpO1xuXG4gICAgaWYgKGNoYW5nZXNbJ3N0YXJDb3VudCddIHx8ICF0aGlzLnN0YXJzLmxlbmd0aCkge1xuICAgICAgdGhpcy5zdGFycyA9IHRoaXMuZ2VuZXJhdGVTdGFycygpO1xuICAgIH1cbiAgfVxuXG4gIG92ZXJyaWRlIG5nT25Jbml0KCkge1xuICAgIHN1cGVyLm5nT25Jbml0KCk7XG5cbiAgICBpZiAoIXRoaXMuY29udHJvbC52YWx1ZSAmJiAhIXRoaXMudmFsdWUpIHtcbiAgICAgIHRoaXMud3JpdGVWYWx1ZSh0aGlzLnZhbHVlKTtcbiAgICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIEdlbmVyYXRlIHRoZSBhcnJheSBvZiBzdGFyc1xuICAgKiBAcHJpdmF0ZVxuICAgKi9cbiAgcHJpdmF0ZSBnZW5lcmF0ZVN0YXJzKCk6IEFycmF5PG51bWJlcj4ge1xuICAgIHJldHVybiBBcnJheS5mcm9tKHsgbGVuZ3RoOiB0aGlzLnN0YXJDb3VudCB9LCAoXywgaSkgPT4gaSArIDEpLnJldmVyc2UoKTtcbiAgfVxufVxuIiwiPGZpZWxkc2V0IGNsYXNzPVwicmF0aW5nXCIgW2NsYXNzLnJhdGluZy1sYWJlbF09XCIhIWxhYmVsXCIgW2NsYXNzLnJhdGluZy1yZWFkLW9ubHldPVwiY29udHJvbC5kaXNhYmxlZFwiPlxuICA8bGVnZW5kPlxuICAgIDxzcGFuPnt7IGxhYmVsIH19PC9zcGFuPlxuICAgIDxzcGFuIGNsYXNzPVwidmlzdWFsbHktaGlkZGVuXCI+XG4gICAgICB7eyAnaXQuY29yZS5yYXRpbmctc3RhcicgfCB0cmFuc2xhdGU6IHsgY3VycmVudDogY29udHJvbC52YWx1ZSB8fCAwLCB0b3RhbDogc3RhcnMubGVuZ3RoIH0gfX1cbiAgICA8L3NwYW4+XG4gIDwvbGVnZW5kPlxuXG4gIEBmb3IgKHN0YXJWYWx1ZSBvZiBzdGFyczsgdHJhY2sgc3RhclZhbHVlKSB7XG4gICAgPGlucHV0XG4gICAgICBbaWRdPVwiaWQgKyAnLScgKyBzdGFyVmFsdWVcIlxuICAgICAgdHlwZT1cInJhZGlvXCJcbiAgICAgIFtuYW1lXT1cImlkXCJcbiAgICAgIFt2YWx1ZV09XCJzdGFyVmFsdWVcIlxuICAgICAgW2F0dHIuYXJpYS1oaWRkZW5dPVwiY29udHJvbC5kaXNhYmxlZFwiXG4gICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiIC8+XG4gICAgPGxhYmVsIGNsYXNzPVwiZnVsbFwiIFtmb3JdPVwiaWQgKyAnLScgKyBzdGFyVmFsdWVcIj5cbiAgICAgIDxpdC1pY29uIG5hbWU9XCJzdGFyLWZ1bGxcIiBzaXplPVwic21cIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2l0LWljb24+XG4gICAgICA8c3BhbiBjbGFzcz1cInZpc3VhbGx5LWhpZGRlblwiPlxuICAgICAgICB7eyAnaXQuY29yZS5yYXRlLXN0YXInIHwgdHJhbnNsYXRlOiB7IGN1cnJlbnQ6IHN0YXJWYWx1ZSwgdG90YWw6IHN0YXJzLmxlbmd0aCB9IH19XG4gICAgICA8L3NwYW4+XG4gICAgPC9sYWJlbD5cbiAgfVxuPC9maWVsZHNldD5cbiJdfQ==