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;
    }
    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.11", ngImport: i0, type: RatingEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: RatingEditComponent, selector: "ax-rating-edit", inputs: { form: "form", label: "label", required: "required" }, 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\"\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\">\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        [checked]=\"form.get('value')?.value === number\"\n      />\n      <label [for]=\"'rating-' + number\" (click)=\"form.touched ? null : form.markAsTouched()\">\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 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)}\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.ɵ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.11", 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\"\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\">\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        [checked]=\"form.get('value')?.value === number\"\n      />\n      <label [for]=\"'rating-' + number\" (click)=\"form.touched ? null : form.markAsTouched()\">\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 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)}\n"] }]
        }], propDecorators: { propertyEditClass: [{
                type: HostBinding,
                args: ['class.c-property-edit']
            }], form: [{
                type: Input
            }], label: [{
                type: Input
            }], required: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW5nLWVkaXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3JhdGluZy1lZGl0L3JhdGluZy1lZGl0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9yYXRpbmctZWRpdC9yYXRpbmctZWRpdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDNUQsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7QUFPakQsTUFBTSxPQUFPLG1CQUFtQjtJQUxoQztRQU13QyxzQkFBaUIsR0FBRyxJQUFJLENBQUM7UUFHdEQsYUFBUSxHQUFHLEtBQUssQ0FBQztLQVMzQjtJQVBDLFVBQVU7UUFDUixJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDO0lBQ2pDLENBQUM7K0dBWlUsbUJBQW1CO21HQUFuQixtQkFBbUIsbU1DUmhDLGk1QkE4QkE7OzRGRHRCYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0UsZ0JBQWdCOzhCQUtZLGlCQUFpQjtzQkFBdEQsV0FBVzt1QkFBQyx1QkFBdUI7Z0JBQzNCLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtGb3JtR3JvdXB9IGZyb20gJ0BuZ25lYXQvcmVhY3RpdmUtZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1yYXRpbmctZWRpdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9yYXRpbmctZWRpdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3JhdGluZy1lZGl0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFJhdGluZ0VkaXRDb21wb25lbnQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmMtcHJvcGVydHktZWRpdCcpIHByb3BlcnR5RWRpdENsYXNzID0gdHJ1ZTtcbiAgQElucHV0KCkgZm9ybTogRm9ybUdyb3VwPGFueT47XG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHJlcXVpcmVkID0gZmFsc2U7XG5cbiAgY2xlYXJWYWx1ZSgpIHtcbiAgICB0aGlzLmZvcm0uZ2V0KCd2YWx1ZScpPy5zZXRWYWx1ZShudWxsKTtcbiAgfVxuXG4gIGdldCBoYXNWYWx1ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5mb3JtPy52YWx1ZT8udmFsdWU7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJoZWFkZXJcIj5cbiAgPHNwYW4gY2xhc3M9XCJsYWJlbFwiPnt7IGxhYmVsIH19PHNwYW4gKm5nSWY9XCJyZXF1aXJlZFwiPiZuYnNwOyo8L3NwYW4+PC9zcGFuPlxuXG4gIDxidXR0b25cbiAgICBheEJ1dHRvblxuICAgIGljb24tYnV0dG9uXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgKm5nSWY9XCJmb3JtPy5lbmFibGVkICYmIGhhc1ZhbHVlXCJcbiAgICAoY2xpY2spPVwiY2xlYXJWYWx1ZSgpXCJcbiAgPlxuICAgIDxheC1pY29uIGNsYXNzPVwiaWNvblwiIG5hbWU9XCJjbG9zZVwiPjwvYXgtaWNvbj5cbiAgPC9idXR0b24+XG48L2Rpdj5cbjxmb3JtIFtmb3JtR3JvdXBdPVwiZm9ybVwiPlxuICA8c3BhbiBjbGFzcz1cInN0YXJzXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgbnVtYmVyIG9mIFsnNScsICc0JywgJzMnLCAnMicsICcxJ11cIj5cbiAgICAgIDxpbnB1dFxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybS5nZXQoJ3ZhbHVlJylcIlxuICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICBbaWRdPVwiJ3JhdGluZy0nICsgbnVtYmVyXCJcbiAgICAgICAgbmFtZT1cInJhdGluZ1wiXG4gICAgICAgIFt2YWx1ZV09XCJudW1iZXJcIlxuICAgICAgICBbY2hlY2tlZF09XCJmb3JtLmdldCgndmFsdWUnKT8udmFsdWUgPT09IG51bWJlclwiXG4gICAgICAvPlxuICAgICAgPGxhYmVsIFtmb3JdPVwiJ3JhdGluZy0nICsgbnVtYmVyXCIgKGNsaWNrKT1cImZvcm0udG91Y2hlZCA/IG51bGwgOiBmb3JtLm1hcmtBc1RvdWNoZWQoKVwiPlxuICAgICAgICA8YXgtaWNvbiBjbGFzcz1cImljb24gc3RhclwiIG5hbWU9XCJzdGFyXCI+PC9heC1pY29uPlxuICAgICAgPC9sYWJlbD5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9zcGFuPlxuPC9mb3JtPlxuIl19