import { Component, HostBinding, Input } from '@angular/core';
import { FormGroup } from '@ngneat/reactive-forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@aztrix/icons";
import * as i4 from "@aztrix/components/button";
export class RatingEditComponent {
    constructor() {
        this.propertyEditClass = true;
        this.required = false;
        this.readonly = false;
    }
    clearValue() {
        this.form.get('value')?.setValue(null);
    }
    get hasValue() {
        return this.form?.value?.value;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RatingEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RatingEditComponent, selector: "ax-rating-edit", inputs: { form: "form", label: "label", required: "required", readonly: "readonly" }, host: { properties: { "class.c-property-edit": "this.propertyEditClass" } }, ngImport: i0, template: "<div class=\"header\">\n  <span class=\"label\">{{ label }}<span *ngIf=\"required\">&nbsp;*</span></span>\n\n  <button\n    axButton\n    icon-button\n    type=\"button\"\n    *ngIf=\"form?.enabled && hasValue && !readonly\"\n    (click)=\"clearValue()\"\n  >\n    <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n  </button>\n</div>\n<form [formGroup]=\"form\">\n  <span class=\"stars\" [ngClass]=\"{readonly: readonly}\">\n    <ng-container *ngFor=\"let number of ['5', '4', '3', '2', '1']\">\n      <input\n        [formControl]=\"form.get('value')\"\n        type=\"radio\"\n        [id]=\"'rating-' + number\"\n        name=\"rating\"\n        [value]=\"number\"\n        [disabled]=\"form.disabled || readonly\"\n        [readonly]=\"readonly\"\n        [checked]=\"form.get('value')?.value === number\"\n      />\n      <label\n        [for]=\"'rating-' + number\"\n        [ngClass]=\"{disabled: form.disabled || readonly}\"\n        (click)=\"form.touched ? null : form.markAsTouched()\"\n      >\n        <ax-icon class=\"icon star\" name=\"star\"></ax-icon>\n      </label>\n    </ng-container>\n  </span>\n</form>\n", styles: [":host{display:flex;flex-direction:column}form{display:flex}.header{display:flex;justify-content:space-between}.header button{margin:-6px 0}.stars{display:inline-flex;flex-direction:row-reverse}.stars input{display:none}.stars input:hover~label .star{color:var(--primary-color-200)}.stars input:checked~label .star{color:var(--primary-color-500)}.stars input:checked~label.disabled .icon.star{color:var(--primary-color-200)}.stars label{cursor:pointer}.star{display:inline-block;color:#bdc3c9;transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1)}.star:hover{transform:scale(1.2)}.readonly{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RatingEditComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-rating-edit', template: "<div class=\"header\">\n  <span class=\"label\">{{ label }}<span *ngIf=\"required\">&nbsp;*</span></span>\n\n  <button\n    axButton\n    icon-button\n    type=\"button\"\n    *ngIf=\"form?.enabled && hasValue && !readonly\"\n    (click)=\"clearValue()\"\n  >\n    <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n  </button>\n</div>\n<form [formGroup]=\"form\">\n  <span class=\"stars\" [ngClass]=\"{readonly: readonly}\">\n    <ng-container *ngFor=\"let number of ['5', '4', '3', '2', '1']\">\n      <input\n        [formControl]=\"form.get('value')\"\n        type=\"radio\"\n        [id]=\"'rating-' + number\"\n        name=\"rating\"\n        [value]=\"number\"\n        [disabled]=\"form.disabled || readonly\"\n        [readonly]=\"readonly\"\n        [checked]=\"form.get('value')?.value === number\"\n      />\n      <label\n        [for]=\"'rating-' + number\"\n        [ngClass]=\"{disabled: form.disabled || readonly}\"\n        (click)=\"form.touched ? null : form.markAsTouched()\"\n      >\n        <ax-icon class=\"icon star\" name=\"star\"></ax-icon>\n      </label>\n    </ng-container>\n  </span>\n</form>\n", styles: [":host{display:flex;flex-direction:column}form{display:flex}.header{display:flex;justify-content:space-between}.header button{margin:-6px 0}.stars{display:inline-flex;flex-direction:row-reverse}.stars input{display:none}.stars input:hover~label .star{color:var(--primary-color-200)}.stars input:checked~label .star{color:var(--primary-color-500)}.stars input:checked~label.disabled .icon.star{color:var(--primary-color-200)}.stars label{cursor:pointer}.star{display:inline-block;color:#bdc3c9;transition:transform .4s cubic-bezier(.25,.8,.25,1),color .4s cubic-bezier(.25,.8,.25,1)}.star:hover{transform:scale(1.2)}.readonly{pointer-events:none}\n"] }]
        }], propDecorators: { propertyEditClass: [{
                type: HostBinding,
                args: ['class.c-property-edit']
            }], form: [{
                type: Input
            }], label: [{
                type: Input
            }], required: [{
                type: Input
            }], readonly: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW5nLWVkaXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3JhdGluZy1lZGl0L3JhdGluZy1lZGl0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9yYXRpbmctZWRpdC9yYXRpbmctZWRpdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDNUQsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7QUFPakQsTUFBTSxPQUFPLG1CQUFtQjtJQUxoQztRQU13QyxzQkFBaUIsR0FBRyxJQUFJLENBQUM7UUFHdEQsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsS0FBSyxDQUFDO0tBUzNCO0lBUEMsVUFBVTtRQUNSLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxFQUFFLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBRUQsSUFBSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUM7SUFDakMsQ0FBQzsrR0FiVSxtQkFBbUI7bUdBQW5CLG1CQUFtQix5TkNSaEMsMm1DQW9DQTs7NEZENUJhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSxnQkFBZ0I7OEJBS1ksaUJBQWlCO3NCQUF0RCxXQUFXO3VCQUFDLHVCQUF1QjtnQkFDM0IsSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybUdyb3VwfSBmcm9tICdAbmduZWF0L3JlYWN0aXZlLWZvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtcmF0aW5nLWVkaXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcmF0aW5nLWVkaXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9yYXRpbmctZWRpdC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBSYXRpbmdFZGl0Q29tcG9uZW50IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5jLXByb3BlcnR5LWVkaXQnKSBwcm9wZXJ0eUVkaXRDbGFzcyA9IHRydWU7XG4gIEBJbnB1dCgpIGZvcm06IEZvcm1Hcm91cDxhbnk+O1xuICBASW5wdXQoKSBsYWJlbD86IHN0cmluZztcbiAgQElucHV0KCkgcmVxdWlyZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgcmVhZG9ubHkgPSBmYWxzZTtcblxuICBjbGVhclZhbHVlKCkge1xuICAgIHRoaXMuZm9ybS5nZXQoJ3ZhbHVlJyk/LnNldFZhbHVlKG51bGwpO1xuICB9XG5cbiAgZ2V0IGhhc1ZhbHVlKCkge1xuICAgIHJldHVybiB0aGlzLmZvcm0/LnZhbHVlPy52YWx1ZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImhlYWRlclwiPlxuICA8c3BhbiBjbGFzcz1cImxhYmVsXCI+e3sgbGFiZWwgfX08c3BhbiAqbmdJZj1cInJlcXVpcmVkXCI+Jm5ic3A7Kjwvc3Bhbj48L3NwYW4+XG5cbiAgPGJ1dHRvblxuICAgIGF4QnV0dG9uXG4gICAgaWNvbi1idXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAqbmdJZj1cImZvcm0/LmVuYWJsZWQgJiYgaGFzVmFsdWUgJiYgIXJlYWRvbmx5XCJcbiAgICAoY2xpY2spPVwiY2xlYXJWYWx1ZSgpXCJcbiAgPlxuICAgIDxheC1pY29uIGNsYXNzPVwiaWNvblwiIG5hbWU9XCJjbG9zZVwiPjwvYXgtaWNvbj5cbiAgPC9idXR0b24+XG48L2Rpdj5cbjxmb3JtIFtmb3JtR3JvdXBdPVwiZm9ybVwiPlxuICA8c3BhbiBjbGFzcz1cInN0YXJzXCIgW25nQ2xhc3NdPVwie3JlYWRvbmx5OiByZWFkb25seX1cIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBudW1iZXIgb2YgWyc1JywgJzQnLCAnMycsICcyJywgJzEnXVwiPlxuICAgICAgPGlucHV0XG4gICAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtLmdldCgndmFsdWUnKVwiXG4gICAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICAgIFtpZF09XCIncmF0aW5nLScgKyBudW1iZXJcIlxuICAgICAgICBuYW1lPVwicmF0aW5nXCJcbiAgICAgICAgW3ZhbHVlXT1cIm51bWJlclwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJmb3JtLmRpc2FibGVkIHx8IHJlYWRvbmx5XCJcbiAgICAgICAgW3JlYWRvbmx5XT1cInJlYWRvbmx5XCJcbiAgICAgICAgW2NoZWNrZWRdPVwiZm9ybS5nZXQoJ3ZhbHVlJyk/LnZhbHVlID09PSBudW1iZXJcIlxuICAgICAgLz5cbiAgICAgIDxsYWJlbFxuICAgICAgICBbZm9yXT1cIidyYXRpbmctJyArIG51bWJlclwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIntkaXNhYmxlZDogZm9ybS5kaXNhYmxlZCB8fCByZWFkb25seX1cIlxuICAgICAgICAoY2xpY2spPVwiZm9ybS50b3VjaGVkID8gbnVsbCA6IGZvcm0ubWFya0FzVG91Y2hlZCgpXCJcbiAgICAgID5cbiAgICAgICAgPGF4LWljb24gY2xhc3M9XCJpY29uIHN0YXJcIiBuYW1lPVwic3RhclwiPjwvYXgtaWNvbj5cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvc3Bhbj5cbjwvZm9ybT5cbiJdfQ==