ngx-surveys/esm2022/lib/form-item/form-item-rating/form-item-rating.component.mjs

Angular 18+ survey / form builder

import { Component, Input, EventEmitter, Output } from '@angular/core';
import { FormItem } from '../form-item';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/form-field";
import * as i3 from "../../components/star-rating/star-rating.component";
export class FormItemRating extends FormItem {
}
export class FormItemRatingComponent {
    constructor() {
        this.editable = true;
        this.changes = new EventEmitter();
    }
    ngOnInit() {
    }
    onRatingChanged(value) {
        if (!this.editable) {
            return;
        }
        this.item.value = value;
        this.changes.emit(this.item);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemRatingComponent, selector: "ammo-form-item-rating", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<div class=\"form-group\">\n    <div class=\"col-xs-12 rating-set\">\n        <div class=\"rating-set-title\">{{item.label}}</div>\n        <div class=\"rating-set-stars\">\n            <mat-star-rating\n                [rating]=\"item.value\"\n                [starCount]=\"5\"\n                [color]=\"editable ? 'primary' : 'muted'\"\n                [readOnly]=\"!editable\"\n                (ratingUpdated)=\"onRatingChanged($event)\"\n            ></mat-star-rating>\n        </div>\n        <mat-error *ngIf=\"item.errors && item.errors.length\">\n            <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n        </mat-error>\n        <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n    </div>\n</div>\n", styles: [".rating-set{display:block;padding:20;text-align:center}.rating-set-title{font-size:.875rem}:host ::ng-deep button.mat-icon-button{height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.StarRatingComponent, selector: "mat-star-rating", inputs: ["rating", "starCount", "color", "readOnly"], outputs: ["ratingUpdated"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemRatingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ammo-form-item-rating', template: "<div class=\"form-group\">\n    <div class=\"col-xs-12 rating-set\">\n        <div class=\"rating-set-title\">{{item.label}}</div>\n        <div class=\"rating-set-stars\">\n            <mat-star-rating\n                [rating]=\"item.value\"\n                [starCount]=\"5\"\n                [color]=\"editable ? 'primary' : 'muted'\"\n                [readOnly]=\"!editable\"\n                (ratingUpdated)=\"onRatingChanged($event)\"\n            ></mat-star-rating>\n        </div>\n        <mat-error *ngIf=\"item.errors && item.errors.length\">\n            <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n        </mat-error>\n        <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n    </div>\n</div>\n", styles: [".rating-set{display:block;padding:20;text-align:center}.rating-set-title{font-size:.875rem}:host ::ng-deep button.mat-icon-button{height:auto}\n"] }]
        }], ctorParameters: () => [], propDecorators: { item: [{
                type: Input
            }], editable: [{
                type: Input
            }], changes: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1pdGVtLXJhdGluZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc3VydmV5cy9zcmMvbGliL2Zvcm0taXRlbS9mb3JtLWl0ZW0tcmF0aW5nL2Zvcm0taXRlbS1yYXRpbmcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXJhdGluZy9mb3JtLWl0ZW0tcmF0aW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLFFBQVEsRUFBa0IsTUFBTSxjQUFjLENBQUM7Ozs7O0FBRXhELE1BQU0sT0FBTyxjQUFlLFNBQVEsUUFBUTtDQUUzQztBQVFELE1BQU0sT0FBTyx1QkFBdUI7SUFNaEM7UUFIUyxhQUFRLEdBQVUsSUFBSSxDQUFDO1FBQ3RCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBa0IsQ0FBQztJQUV2QyxDQUFDO0lBRWpCLFFBQVE7SUFFUixDQUFDO0lBRUQsZUFBZSxDQUFDLEtBQUs7UUFDakIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUMsQ0FBQztZQUNoQixPQUFPO1FBQ1gsQ0FBQztRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFDLEtBQUssQ0FBQztRQUN0QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakMsQ0FBQzsrR0FsQlEsdUJBQXVCO21HQUF2Qix1QkFBdUIsOElDYnBDLG95QkFrQkE7OzRGRExhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSx1QkFBdUI7d0RBTXRCLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIEV2ZW50RW1pdHRlciwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtSXRlbSwgRm9ybUl0ZW1XaWRnZXQgfSBmcm9tICcuLi9mb3JtLWl0ZW0nO1xuXG5leHBvcnQgY2xhc3MgRm9ybUl0ZW1SYXRpbmcgZXh0ZW5kcyBGb3JtSXRlbSB7XG4gICAgdmFsdWU6IG51bWJlcjtcbn1cblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhbW1vLWZvcm0taXRlbS1yYXRpbmcnLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1pdGVtLXJhdGluZy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvcm0taXRlbS1yYXRpbmcuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBGb3JtSXRlbVJhdGluZ0NvbXBvbmVudCBpbXBsZW1lbnRzIEZvcm1JdGVtV2lkZ2V0LCBPbkluaXQge1xuXG4gICAgQElucHV0KCkgaXRlbTogRm9ybUl0ZW1SYXRpbmc7XG4gICAgQElucHV0KCkgZWRpdGFibGU6IGJvb2xlYW49dHJ1ZTtcbiAgICBAT3V0cHV0KCkgY2hhbmdlcyA9IG5ldyBFdmVudEVtaXR0ZXI8Rm9ybUl0ZW1SYXRpbmc+KCk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gICAgbmdPbkluaXQoKSB7XG5cbiAgICB9XG5cbiAgICBvblJhdGluZ0NoYW5nZWQodmFsdWUpe1xuICAgICAgICBpZiAoIXRoaXMuZWRpdGFibGUpe1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMuaXRlbS52YWx1ZT12YWx1ZTtcbiAgICAgICAgdGhpcy5jaGFuZ2VzLmVtaXQodGhpcy5pdGVtKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZm9ybS1ncm91cFwiPlxuICAgIDxkaXYgY2xhc3M9XCJjb2wteHMtMTIgcmF0aW5nLXNldFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicmF0aW5nLXNldC10aXRsZVwiPnt7aXRlbS5sYWJlbH19PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJyYXRpbmctc2V0LXN0YXJzXCI+XG4gICAgICAgICAgICA8bWF0LXN0YXItcmF0aW5nXG4gICAgICAgICAgICAgICAgW3JhdGluZ109XCJpdGVtLnZhbHVlXCJcbiAgICAgICAgICAgICAgICBbc3RhckNvdW50XT1cIjVcIlxuICAgICAgICAgICAgICAgIFtjb2xvcl09XCJlZGl0YWJsZSA/ICdwcmltYXJ5JyA6ICdtdXRlZCdcIlxuICAgICAgICAgICAgICAgIFtyZWFkT25seV09XCIhZWRpdGFibGVcIlxuICAgICAgICAgICAgICAgIChyYXRpbmdVcGRhdGVkKT1cIm9uUmF0aW5nQ2hhbmdlZCgkZXZlbnQpXCJcbiAgICAgICAgICAgID48L21hdC1zdGFyLXJhdGluZz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJpdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGhcIj5cbiAgICAgICAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGVycm9yIG9mIGl0ZW0uZXJyb3JzXCI+e3tlcnJvci5tZXNzYWdlfX08L2Rpdj5cbiAgICAgICAgPC9tYXQtZXJyb3I+XG4gICAgICAgIDxtYXQtaGludCBhbGlnbj1cInN0YXJ0XCIgKm5nSWY9XCIhKGl0ZW0uZXJyb3JzICYmIGl0ZW0uZXJyb3JzLmxlbmd0aClcIj48c3Ryb25nPnt7aXRlbS5oaW50fX08L3N0cm9uZz4gPC9tYXQtaGludD5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19