UNPKG

@ajsf-extended/core

Version:

Angular JSON Schema Form builder core - fork from https://github.com/hamzahamidi/ajsf

153 lines (149 loc) 15 kB
import { buildTitleMap } from '../shared'; import { Component, Input } from '@angular/core'; import * as i0 from "@angular/core"; import * as i1 from "../json-schema-form.service"; import * as i2 from "@angular/common"; export class RadiosComponent { constructor(jsf) { this.jsf = jsf; this.controlDisabled = false; this.boundControl = false; this.layoutOrientation = 'vertical'; this.radiosList = []; } ngOnInit() { this.options = this.layoutNode.options || {}; if (this.layoutNode.type === 'radios-inline' || this.layoutNode.type === 'radiobuttons') { this.layoutOrientation = 'horizontal'; } this.radiosList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, true); this.jsf.initializeControl(this); } updateValue(event) { this.jsf.updateValue(this, event.target.value); } } RadiosComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: RadiosComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); RadiosComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: RadiosComponent, selector: "radios-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: ` <label *ngIf="options?.title" [attr.for]="'control' + layoutNode?._id" [class]="options?.labelHtmlClass || ''" [style.display]="options?.notitle ? 'none' : ''" [innerHTML]="options?.title"></label> <!-- 'horizontal' = radios-inline or radiobuttons --> <div *ngIf="layoutOrientation === 'horizontal'" [class]="options?.htmlClass || ''"> <label *ngFor="let radioItem of radiosList" [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value" [class]="(options?.itemLabelHtmlClass || '') + ((controlValue + '' === radioItem?.value + '') ? (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) : (' ' + (options?.style?.unselected || '')))"> <input type="radio" [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'" [attr.readonly]="options?.readonly ? 'readonly' : null" [attr.required]="options?.required" [checked]="radioItem?.value === controlValue" [class]="options?.fieldHtmlClass || ''" [disabled]="controlDisabled" [id]="'control' + layoutNode?._id + '/' + radioItem?.value" [name]="controlName" [value]="radioItem?.value" (change)="updateValue($event)"> <span [innerHTML]="radioItem?.name"></span> </label> </div> <!-- 'vertical' = regular radios --> <div *ngIf="layoutOrientation !== 'horizontal'"> <div *ngFor="let radioItem of radiosList" [class]="options?.htmlClass || ''"> <label [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value" [class]="(options?.itemLabelHtmlClass || '') + ((controlValue + '' === radioItem?.value + '') ? (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) : (' ' + (options?.style?.unselected || '')))"> <input type="radio" [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'" [attr.readonly]="options?.readonly ? 'readonly' : null" [attr.required]="options?.required" [checked]="radioItem?.value === controlValue" [class]="options?.fieldHtmlClass || ''" [disabled]="controlDisabled" [id]="'control' + layoutNode?._id + '/' + radioItem?.value" [name]="controlName" [value]="radioItem?.value" (change)="updateValue($event)"> <span [innerHTML]="radioItem?.name"></span> </label> </div> </div>`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: RadiosComponent, decorators: [{ type: Component, args: [{ // tslint:disable-next-line:component-selector selector: 'radios-widget', template: ` <label *ngIf="options?.title" [attr.for]="'control' + layoutNode?._id" [class]="options?.labelHtmlClass || ''" [style.display]="options?.notitle ? 'none' : ''" [innerHTML]="options?.title"></label> <!-- 'horizontal' = radios-inline or radiobuttons --> <div *ngIf="layoutOrientation === 'horizontal'" [class]="options?.htmlClass || ''"> <label *ngFor="let radioItem of radiosList" [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value" [class]="(options?.itemLabelHtmlClass || '') + ((controlValue + '' === radioItem?.value + '') ? (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) : (' ' + (options?.style?.unselected || '')))"> <input type="radio" [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'" [attr.readonly]="options?.readonly ? 'readonly' : null" [attr.required]="options?.required" [checked]="radioItem?.value === controlValue" [class]="options?.fieldHtmlClass || ''" [disabled]="controlDisabled" [id]="'control' + layoutNode?._id + '/' + radioItem?.value" [name]="controlName" [value]="radioItem?.value" (change)="updateValue($event)"> <span [innerHTML]="radioItem?.name"></span> </label> </div> <!-- 'vertical' = regular radios --> <div *ngIf="layoutOrientation !== 'horizontal'"> <div *ngFor="let radioItem of radiosList" [class]="options?.htmlClass || ''"> <label [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value" [class]="(options?.itemLabelHtmlClass || '') + ((controlValue + '' === radioItem?.value + '') ? (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) : (' ' + (options?.style?.unselected || '')))"> <input type="radio" [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'" [attr.readonly]="options?.readonly ? 'readonly' : null" [attr.required]="options?.required" [checked]="radioItem?.value === controlValue" [class]="options?.fieldHtmlClass || ''" [disabled]="controlDisabled" [id]="'control' + layoutNode?._id + '/' + radioItem?.value" [name]="controlName" [value]="radioItem?.value" (change)="updateValue($event)"> <span [innerHTML]="radioItem?.name"></span> </label> </div> </div>`, }] }], ctorParameters: function () { return [{ type: i1.JsonSchemaFormService }]; }, propDecorators: { layoutNode: [{ type: Input }], layoutIndex: [{ type: Input }], dataIndex: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW9zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Fqc2YtY29yZS9zcmMvbGliL3dpZGdldC1saWJyYXJ5L3JhZGlvcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUMxQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7OztBQWdFekQsTUFBTSxPQUFPLGVBQWU7SUFhMUIsWUFDVSxHQUEwQjtRQUExQixRQUFHLEdBQUgsR0FBRyxDQUF1QjtRQVZwQyxvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUN4QixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUVyQixzQkFBaUIsR0FBRyxVQUFVLENBQUM7UUFDL0IsZUFBVSxHQUFVLEVBQUUsQ0FBQztJQU9uQixDQUFDO0lBRUwsUUFBUTtRQUNOLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDO1FBQzdDLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEtBQUssZUFBZTtZQUMxQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksS0FBSyxjQUFjLEVBQ3ZDO1lBQ0EsSUFBSSxDQUFDLGlCQUFpQixHQUFHLFlBQVksQ0FBQztTQUN2QztRQUNELElBQUksQ0FBQyxVQUFVLEdBQUcsYUFBYSxDQUM3QixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFDL0MsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUN4QixDQUFDO1FBQ0YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQUs7UUFDZixJQUFJLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqRCxDQUFDOzs0R0FqQ1UsZUFBZTtnR0FBZixlQUFlLCtJQXpEaEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7V0F1REQ7MkZBRUUsZUFBZTtrQkE1RDNCLFNBQVM7bUJBQUM7b0JBQ1QsOENBQThDO29CQUM5QyxRQUFRLEVBQUUsZUFBZTtvQkFDekIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O1dBdUREO2lCQUNWOzRHQVVVLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWJzdHJhY3RDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBidWlsZFRpdGxlTWFwIH0gZnJvbSAnLi4vc2hhcmVkJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEpzb25TY2hlbWFGb3JtU2VydmljZSB9IGZyb20gJy4uL2pzb24tc2NoZW1hLWZvcm0uc2VydmljZSc7XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmNvbXBvbmVudC1zZWxlY3RvclxyXG4gIHNlbGVjdG9yOiAncmFkaW9zLXdpZGdldCcsXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxsYWJlbCAqbmdJZj1cIm9wdGlvbnM/LnRpdGxlXCJcclxuICAgICAgW2F0dHIuZm9yXT1cIidjb250cm9sJyArIGxheW91dE5vZGU/Ll9pZFwiXHJcbiAgICAgIFtjbGFzc109XCJvcHRpb25zPy5sYWJlbEh0bWxDbGFzcyB8fCAnJ1wiXHJcbiAgICAgIFtzdHlsZS5kaXNwbGF5XT1cIm9wdGlvbnM/Lm5vdGl0bGUgPyAnbm9uZScgOiAnJ1wiXHJcbiAgICAgIFtpbm5lckhUTUxdPVwib3B0aW9ucz8udGl0bGVcIj48L2xhYmVsPlxyXG5cclxuICAgIDwhLS0gJ2hvcml6b250YWwnID0gcmFkaW9zLWlubGluZSBvciByYWRpb2J1dHRvbnMgLS0+XHJcbiAgICA8ZGl2ICpuZ0lmPVwibGF5b3V0T3JpZW50YXRpb24gPT09ICdob3Jpem9udGFsJ1wiXHJcbiAgICAgIFtjbGFzc109XCJvcHRpb25zPy5odG1sQ2xhc3MgfHwgJydcIj5cclxuICAgICAgPGxhYmVsICpuZ0Zvcj1cImxldCByYWRpb0l0ZW0gb2YgcmFkaW9zTGlzdFwiXHJcbiAgICAgICAgW2F0dHIuZm9yXT1cIidjb250cm9sJyArIGxheW91dE5vZGU/Ll9pZCArICcvJyArIHJhZGlvSXRlbT8udmFsdWVcIlxyXG4gICAgICAgIFtjbGFzc109XCIob3B0aW9ucz8uaXRlbUxhYmVsSHRtbENsYXNzIHx8ICcnKSArXHJcbiAgICAgICAgICAoKGNvbnRyb2xWYWx1ZSArICcnID09PSByYWRpb0l0ZW0/LnZhbHVlICsgJycpID9cclxuICAgICAgICAgICgnICcgKyAob3B0aW9ucz8uYWN0aXZlQ2xhc3MgfHwgJycpICsgJyAnICsgKG9wdGlvbnM/LnN0eWxlPy5zZWxlY3RlZCB8fCAnJykpIDpcclxuICAgICAgICAgICgnICcgKyAob3B0aW9ucz8uc3R5bGU/LnVuc2VsZWN0ZWQgfHwgJycpKSlcIj5cclxuICAgICAgICA8aW5wdXQgdHlwZT1cInJhZGlvXCJcclxuICAgICAgICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiJ2NvbnRyb2wnICsgbGF5b3V0Tm9kZT8uX2lkICsgJ1N0YXR1cydcIlxyXG4gICAgICAgICAgW2F0dHIucmVhZG9ubHldPVwib3B0aW9ucz8ucmVhZG9ubHkgPyAncmVhZG9ubHknIDogbnVsbFwiXHJcbiAgICAgICAgICBbYXR0ci5yZXF1aXJlZF09XCJvcHRpb25zPy5yZXF1aXJlZFwiXHJcbiAgICAgICAgICBbY2hlY2tlZF09XCJyYWRpb0l0ZW0/LnZhbHVlID09PSBjb250cm9sVmFsdWVcIlxyXG4gICAgICAgICAgW2NsYXNzXT1cIm9wdGlvbnM/LmZpZWxkSHRtbENsYXNzIHx8ICcnXCJcclxuICAgICAgICAgIFtkaXNhYmxlZF09XCJjb250cm9sRGlzYWJsZWRcIlxyXG4gICAgICAgICAgW2lkXT1cIidjb250cm9sJyArIGxheW91dE5vZGU/Ll9pZCArICcvJyArIHJhZGlvSXRlbT8udmFsdWVcIlxyXG4gICAgICAgICAgW25hbWVdPVwiY29udHJvbE5hbWVcIlxyXG4gICAgICAgICAgW3ZhbHVlXT1cInJhZGlvSXRlbT8udmFsdWVcIlxyXG4gICAgICAgICAgKGNoYW5nZSk9XCJ1cGRhdGVWYWx1ZSgkZXZlbnQpXCI+XHJcbiAgICAgICAgPHNwYW4gW2lubmVySFRNTF09XCJyYWRpb0l0ZW0/Lm5hbWVcIj48L3NwYW4+XHJcbiAgICAgIDwvbGFiZWw+XHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgICA8IS0tICd2ZXJ0aWNhbCcgPSByZWd1bGFyIHJhZGlvcyAtLT5cclxuICAgIDxkaXYgKm5nSWY9XCJsYXlvdXRPcmllbnRhdGlvbiAhPT0gJ2hvcml6b250YWwnXCI+XHJcbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IHJhZGlvSXRlbSBvZiByYWRpb3NMaXN0XCJcclxuICAgICAgICBbY2xhc3NdPVwib3B0aW9ucz8uaHRtbENsYXNzIHx8ICcnXCI+XHJcbiAgICAgICAgPGxhYmVsXHJcbiAgICAgICAgICBbYXR0ci5mb3JdPVwiJ2NvbnRyb2wnICsgbGF5b3V0Tm9kZT8uX2lkICsgJy8nICsgcmFkaW9JdGVtPy52YWx1ZVwiXHJcbiAgICAgICAgICBbY2xhc3NdPVwiKG9wdGlvbnM/Lml0ZW1MYWJlbEh0bWxDbGFzcyB8fCAnJykgK1xyXG4gICAgICAgICAgICAoKGNvbnRyb2xWYWx1ZSArICcnID09PSByYWRpb0l0ZW0/LnZhbHVlICsgJycpID9cclxuICAgICAgICAgICAgKCcgJyArIChvcHRpb25zPy5hY3RpdmVDbGFzcyB8fCAnJykgKyAnICcgKyAob3B0aW9ucz8uc3R5bGU/LnNlbGVjdGVkIHx8ICcnKSkgOlxyXG4gICAgICAgICAgICAoJyAnICsgKG9wdGlvbnM/LnN0eWxlPy51bnNlbGVjdGVkIHx8ICcnKSkpXCI+XHJcbiAgICAgICAgICA8aW5wdXQgdHlwZT1cInJhZGlvXCJcclxuICAgICAgICAgICAgW2F0dHIuYXJpYS1kZXNjcmliZWRieV09XCInY29udHJvbCcgKyBsYXlvdXROb2RlPy5faWQgKyAnU3RhdHVzJ1wiXHJcbiAgICAgICAgICAgIFthdHRyLnJlYWRvbmx5XT1cIm9wdGlvbnM/LnJlYWRvbmx5ID8gJ3JlYWRvbmx5JyA6IG51bGxcIlxyXG4gICAgICAgICAgICBbYXR0ci5yZXF1aXJlZF09XCJvcHRpb25zPy5yZXF1aXJlZFwiXHJcbiAgICAgICAgICAgIFtjaGVja2VkXT1cInJhZGlvSXRlbT8udmFsdWUgPT09IGNvbnRyb2xWYWx1ZVwiXHJcbiAgICAgICAgICAgIFtjbGFzc109XCJvcHRpb25zPy5maWVsZEh0bWxDbGFzcyB8fCAnJ1wiXHJcbiAgICAgICAgICAgIFtkaXNhYmxlZF09XCJjb250cm9sRGlzYWJsZWRcIlxyXG4gICAgICAgICAgICBbaWRdPVwiJ2NvbnRyb2wnICsgbGF5b3V0Tm9kZT8uX2lkICsgJy8nICsgcmFkaW9JdGVtPy52YWx1ZVwiXHJcbiAgICAgICAgICAgIFtuYW1lXT1cImNvbnRyb2xOYW1lXCJcclxuICAgICAgICAgICAgW3ZhbHVlXT1cInJhZGlvSXRlbT8udmFsdWVcIlxyXG4gICAgICAgICAgICAoY2hhbmdlKT1cInVwZGF0ZVZhbHVlKCRldmVudClcIj5cclxuICAgICAgICAgIDxzcGFuIFtpbm5lckhUTUxdPVwicmFkaW9JdGVtPy5uYW1lXCI+PC9zcGFuPlxyXG4gICAgICAgIDwvbGFiZWw+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+YCxcclxufSlcclxuZXhwb3J0IGNsYXNzIFJhZGlvc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgZm9ybUNvbnRyb2w6IEFic3RyYWN0Q29udHJvbDtcclxuICBjb250cm9sTmFtZTogc3RyaW5nO1xyXG4gIGNvbnRyb2xWYWx1ZTogYW55O1xyXG4gIGNvbnRyb2xEaXNhYmxlZCA9IGZhbHNlO1xyXG4gIGJvdW5kQ29udHJvbCA9IGZhbHNlO1xyXG4gIG9wdGlvbnM6IGFueTtcclxuICBsYXlvdXRPcmllbnRhdGlvbiA9ICd2ZXJ0aWNhbCc7XHJcbiAgcmFkaW9zTGlzdDogYW55W10gPSBbXTtcclxuICBASW5wdXQoKSBsYXlvdXROb2RlOiBhbnk7XHJcbiAgQElucHV0KCkgbGF5b3V0SW5kZXg6IG51bWJlcltdO1xyXG4gIEBJbnB1dCgpIGRhdGFJbmRleDogbnVtYmVyW107XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBqc2Y6IEpzb25TY2hlbWFGb3JtU2VydmljZVxyXG4gICkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5vcHRpb25zID0gdGhpcy5sYXlvdXROb2RlLm9wdGlvbnMgfHwge307XHJcbiAgICBpZiAodGhpcy5sYXlvdXROb2RlLnR5cGUgPT09ICdyYWRpb3MtaW5saW5lJyB8fFxyXG4gICAgICB0aGlzLmxheW91dE5vZGUudHlwZSA9PT0gJ3JhZGlvYnV0dG9ucydcclxuICAgICkge1xyXG4gICAgICB0aGlzLmxheW91dE9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnO1xyXG4gICAgfVxyXG4gICAgdGhpcy5yYWRpb3NMaXN0ID0gYnVpbGRUaXRsZU1hcChcclxuICAgICAgdGhpcy5vcHRpb25zLnRpdGxlTWFwIHx8IHRoaXMub3B0aW9ucy5lbnVtTmFtZXMsXHJcbiAgICAgIHRoaXMub3B0aW9ucy5lbnVtLCB0cnVlXHJcbiAgICApO1xyXG4gICAgdGhpcy5qc2YuaW5pdGlhbGl6ZUNvbnRyb2wodGhpcyk7XHJcbiAgfVxyXG5cclxuICB1cGRhdGVWYWx1ZShldmVudCkge1xyXG4gICAgdGhpcy5qc2YudXBkYXRlVmFsdWUodGhpcywgZXZlbnQudGFyZ2V0LnZhbHVlKTtcclxuICB9XHJcbn1cclxuIl19