ngx-surveys/esm2022/lib/form-item/form-item-radio/radio-group/radio-group.component.mjs

Angular 18+ survey / form builder

import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/checkbox";
import * as i4 from "@angular/material/radio";
export class RadioGroupComponent {
    constructor() {
        this.editable = true;
        this.options = [];
        this.selectionChange = new EventEmitter();
    }
    ngOnInit() {
    }
    isOptionSelected(option) {
        return this.multiple ? (this.value || []).indexOf(option.optionValue) >= 0 : this.value === option.optionValue;
    }
    onSelectionChange(event) {
        this.selectionChange.emit(event.value);
    }
    onCheckboxSelectionChange(event) {
        let value = this.value && Array.isArray(this.value) ? this.value : [];
        if (event.checked) {
            value.push(event.source.value);
        }
        else {
            value = value.filter(v => v !== event.source.value);
        }
        //console.log(value);
        this.selectionChange.emit(value);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: RadioGroupComponent, selector: "app-radio-group", inputs: { label: "label", editable: "editable", required: "required", multiple: "multiple", options: "options", value: "value" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<mat-radio-group [attr.aria-label]=\"label\" *ngIf=\"!multiple\"\n    (change)=\"onSelectionChange($event)\"\n    [disabled]=\"!editable\"\n    [(ngModel)]=\"value\"\n    [required]=\"required\"\n>\n    <mat-radio-button *ngFor=\"let option of options\"\n        [value]=\"option.optionValue\"\n        [checked]=\"isOptionSelected(option)\"\n        >{{option.label}}\n    </mat-radio-button>\n\n</mat-radio-group>\n<div class=\"example-list-section\" *ngIf=\"multiple\">\n    <ul>\n      <li *ngFor=\"let option of options\">\n        <mat-checkbox\n            [value]=\"option.optionValue\"\n            [checked]=\"isOptionSelected(option)\"\n            [disabled]=\"!editable\"\n            (change)=\"onCheckboxSelectionChange($event)\">\n          {{option.label}}\n        </mat-checkbox>\n      </li>\n    </ul>\n</div>\n", styles: [".mat-radio-group.is-mobile{display:flex;flex-direction:column}.example-section{margin:12px 0}.example-margin{margin:0 12px}ul{list-style-type:none;margin-top:4px;padding-left:10px}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RadioGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-radio-group', template: "<mat-radio-group [attr.aria-label]=\"label\" *ngIf=\"!multiple\"\n    (change)=\"onSelectionChange($event)\"\n    [disabled]=\"!editable\"\n    [(ngModel)]=\"value\"\n    [required]=\"required\"\n>\n    <mat-radio-button *ngFor=\"let option of options\"\n        [value]=\"option.optionValue\"\n        [checked]=\"isOptionSelected(option)\"\n        >{{option.label}}\n    </mat-radio-button>\n\n</mat-radio-group>\n<div class=\"example-list-section\" *ngIf=\"multiple\">\n    <ul>\n      <li *ngFor=\"let option of options\">\n        <mat-checkbox\n            [value]=\"option.optionValue\"\n            [checked]=\"isOptionSelected(option)\"\n            [disabled]=\"!editable\"\n            (change)=\"onCheckboxSelectionChange($event)\">\n          {{option.label}}\n        </mat-checkbox>\n      </li>\n    </ul>\n</div>\n", styles: [".mat-radio-group.is-mobile{display:flex;flex-direction:column}.example-section{margin:12px 0}.example-margin{margin:0 12px}ul{list-style-type:none;margin-top:4px;padding-left:10px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { label: [{
                type: Input
            }], editable: [{
                type: Input
            }], required: [{
                type: Input
            }], multiple: [{
                type: Input
            }], options: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }], value: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXJhZGlvL3JhZGlvLWdyb3VwL3JhZGlvLWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zdXJ2ZXlzL3NyYy9saWIvZm9ybS1pdGVtL2Zvcm0taXRlbS1yYWRpby9yYWRpby1ncm91cC9yYWRpby1ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFXL0UsTUFBTSxPQUFPLG1CQUFtQjtJQVc5QjtRQVJTLGFBQVEsR0FBVSxJQUFJLENBQUM7UUFHdkIsWUFBTyxHQUF1QixFQUFFLENBQUM7UUFDaEMsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBcUIsQ0FBQztJQUlsRCxDQUFDO0lBRWpCLFFBQVE7SUFDUixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsTUFBeUI7UUFDeEMsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksRUFBRSxDQUFDLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsSUFBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEtBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQztJQUM5RyxDQUFDO0lBRUQsaUJBQWlCLENBQUMsS0FBb0I7UUFDbEMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFDRCx5QkFBeUIsQ0FBQyxLQUF1QjtRQUMvQyxJQUFJLEtBQUssR0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDcEUsSUFBSSxLQUFLLENBQUMsT0FBTyxFQUFDLENBQUM7WUFDZixLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDbkMsQ0FBQzthQUNJLENBQUM7WUFDSixLQUFLLEdBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUEsRUFBRSxDQUFBLENBQUMsS0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2hELENBQUM7UUFDRCxxQkFBcUI7UUFDckIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQzsrR0FqQ1UsbUJBQW1CO21HQUFuQixtQkFBbUIsME9DWGhDLGswQkEwQkE7OzRGRGZhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSxpQkFBaUI7d0RBTWxCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksZUFBZTtzQkFBeEIsTUFBTTtnQkFFRSxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtSXRlbU9wdGlvbkl0ZW0gfSBmcm9tICcuLi8uLi9mb3JtLWl0ZW0nO1xuaW1wb3J0IHsgTWF0UmFkaW9DaGFuZ2UgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9yYWRpbyc7XG5pbXBvcnQgeyBNYXRDaGVja2JveENoYW5nZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2NoZWNrYm94JztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtcmFkaW8tZ3JvdXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vcmFkaW8tZ3JvdXAuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9yYWRpby1ncm91cC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFJhZGlvR3JvdXBDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGVkaXRhYmxlOiBib29sZWFuPXRydWU7XG4gIEBJbnB1dCgpIHJlcXVpcmVkOiBib29sZWFuO1xuICBASW5wdXQoKSBtdWx0aXBsZTogYm9vbGVhbjtcbiAgQElucHV0KCkgb3B0aW9uczogRm9ybUl0ZW1PcHRpb25JdGVtW109W107XG4gIEBPdXRwdXQoKSBzZWxlY3Rpb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZyB8IHN0cmluZ1tdPigpO1xuXG4gIEBJbnB1dCgpIHZhbHVlOiBzdHJpbmcgfCBzdHJpbmdbXTtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbiAgaXNPcHRpb25TZWxlY3RlZChvcHRpb246Rm9ybUl0ZW1PcHRpb25JdGVtKXtcbiAgICByZXR1cm4gdGhpcy5tdWx0aXBsZSA/ICh0aGlzLnZhbHVlIHx8IFtdKS5pbmRleE9mKG9wdGlvbi5vcHRpb25WYWx1ZSkgPj0wIDogdGhpcy52YWx1ZT09PW9wdGlvbi5vcHRpb25WYWx1ZTtcbiAgfVxuXG4gIG9uU2VsZWN0aW9uQ2hhbmdlKGV2ZW50Ok1hdFJhZGlvQ2hhbmdlKXtcbiAgICAgIHRoaXMuc2VsZWN0aW9uQ2hhbmdlLmVtaXQoZXZlbnQudmFsdWUpO1xuICB9XG4gIG9uQ2hlY2tib3hTZWxlY3Rpb25DaGFuZ2UoZXZlbnQ6TWF0Q2hlY2tib3hDaGFuZ2Upe1xuICAgIGxldCB2YWx1ZT10aGlzLnZhbHVlICYmIEFycmF5LmlzQXJyYXkodGhpcy52YWx1ZSkgPyB0aGlzLnZhbHVlIDogW107XG4gICAgaWYgKGV2ZW50LmNoZWNrZWQpe1xuICAgICAgICB2YWx1ZS5wdXNoKGV2ZW50LnNvdXJjZS52YWx1ZSk7XG4gICAgfVxuICAgIGVsc2Uge1xuICAgICAgdmFsdWU9dmFsdWUuZmlsdGVyKHY9PnYhPT1ldmVudC5zb3VyY2UudmFsdWUpO1xuICAgIH1cbiAgICAvL2NvbnNvbGUubG9nKHZhbHVlKTtcbiAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZS5lbWl0KHZhbHVlKTtcbiAgfVxuXG59XG4iLCI8bWF0LXJhZGlvLWdyb3VwIFthdHRyLmFyaWEtbGFiZWxdPVwibGFiZWxcIiAqbmdJZj1cIiFtdWx0aXBsZVwiXG4gICAgKGNoYW5nZSk9XCJvblNlbGVjdGlvbkNoYW5nZSgkZXZlbnQpXCJcbiAgICBbZGlzYWJsZWRdPVwiIWVkaXRhYmxlXCJcbiAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcbiAgICBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuPlxuICAgIDxtYXQtcmFkaW8tYnV0dG9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2Ygb3B0aW9uc1wiXG4gICAgICAgIFt2YWx1ZV09XCJvcHRpb24ub3B0aW9uVmFsdWVcIlxuICAgICAgICBbY2hlY2tlZF09XCJpc09wdGlvblNlbGVjdGVkKG9wdGlvbilcIlxuICAgICAgICA+e3tvcHRpb24ubGFiZWx9fVxuICAgIDwvbWF0LXJhZGlvLWJ1dHRvbj5cblxuPC9tYXQtcmFkaW8tZ3JvdXA+XG48ZGl2IGNsYXNzPVwiZXhhbXBsZS1saXN0LXNlY3Rpb25cIiAqbmdJZj1cIm11bHRpcGxlXCI+XG4gICAgPHVsPlxuICAgICAgPGxpICpuZ0Zvcj1cImxldCBvcHRpb24gb2Ygb3B0aW9uc1wiPlxuICAgICAgICA8bWF0LWNoZWNrYm94XG4gICAgICAgICAgICBbdmFsdWVdPVwib3B0aW9uLm9wdGlvblZhbHVlXCJcbiAgICAgICAgICAgIFtjaGVja2VkXT1cImlzT3B0aW9uU2VsZWN0ZWQob3B0aW9uKVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiIWVkaXRhYmxlXCJcbiAgICAgICAgICAgIChjaGFuZ2UpPVwib25DaGVja2JveFNlbGVjdGlvbkNoYW5nZSgkZXZlbnQpXCI+XG4gICAgICAgICAge3tvcHRpb24ubGFiZWx9fVxuICAgICAgICA8L21hdC1jaGVja2JveD5cbiAgICAgIDwvbGk+XG4gICAgPC91bD5cbjwvZGl2PlxuIl19