@cfstratos/ajsf-material
Version:
Angular JSON Schema Form builder using Angular Material UI
89 lines (88 loc) • 13.8 kB
JavaScript
import { __decorate, __values } from "tslib";
import { buildTitleMap } from '@cfstratos/ajsf-core';
import { Component, Input } from '@angular/core';
import { JsonSchemaFormService, TitleMapItem } from '@cfstratos/ajsf-core';
// TODO: Change this to use a Selection List instead?
// https://material.angular.io/components/list/overview
var MaterialCheckboxesComponent = /** @class */ (function () {
function MaterialCheckboxesComponent(jsf) {
this.jsf = jsf;
this.controlDisabled = false;
this.boundControl = false;
this.horizontalList = false;
this.checkboxList = [];
}
MaterialCheckboxesComponent.prototype.ngOnInit = function () {
var e_1, _a;
this.options = this.layoutNode.options || {};
this.horizontalList = this.layoutNode.type === 'checkboxes-inline' ||
this.layoutNode.type === 'checkboxbuttons';
this.jsf.initializeControl(this);
this.checkboxList = buildTitleMap(this.options.titleMap || this.options.enumNames, this.options.enum, true);
if (this.boundControl) {
var formArray = this.jsf.getFormControl(this);
try {
for (var _b = __values(this.checkboxList), _c = _b.next(); !_c.done; _c = _b.next()) {
var checkboxItem = _c.value;
checkboxItem.checked = formArray.value.includes(checkboxItem.value);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
}
};
Object.defineProperty(MaterialCheckboxesComponent.prototype, "allChecked", {
get: function () {
return this.checkboxList.filter(function (t) { return t.checked; }).length === this.checkboxList.length;
},
enumerable: true,
configurable: true
});
Object.defineProperty(MaterialCheckboxesComponent.prototype, "someChecked", {
get: function () {
var checkedItems = this.checkboxList.filter(function (t) { return t.checked; }).length;
return checkedItems > 0 && checkedItems < this.checkboxList.length;
},
enumerable: true,
configurable: true
});
MaterialCheckboxesComponent.prototype.updateValue = function () {
this.options.showErrors = true;
if (this.boundControl) {
this.jsf.updateArrayCheckboxList(this, this.checkboxList);
}
};
MaterialCheckboxesComponent.prototype.updateAllValues = function (event) {
this.options.showErrors = true;
this.checkboxList.forEach(function (t) { return t.checked = event.checked; });
this.updateValue();
};
MaterialCheckboxesComponent.ctorParameters = function () { return [
{ type: JsonSchemaFormService }
]; };
__decorate([
Input()
], MaterialCheckboxesComponent.prototype, "layoutNode", void 0);
__decorate([
Input()
], MaterialCheckboxesComponent.prototype, "layoutIndex", void 0);
__decorate([
Input()
], MaterialCheckboxesComponent.prototype, "dataIndex", void 0);
MaterialCheckboxesComponent = __decorate([
Component({
// tslint:disable-next-line:component-selector
selector: 'material-checkboxes-widget',
template: "\n <div>\n <mat-checkbox type=\"checkbox\"\n [checked]=\"allChecked\"\n [color]=\"options?.color || 'primary'\"\n [disabled]=\"controlDisabled || options?.readonly\"\n [indeterminate]=\"someChecked\"\n [name]=\"options?.name\"\n (blur)=\"options.showErrors = true\"\n (change)=\"updateAllValues($event)\">\n <span class=\"checkbox-name\" [innerHTML]=\"options?.name\"></span>\n </mat-checkbox>\n <label *ngIf=\"options?.title\"\n class=\"title\"\n [class]=\"options?.labelHtmlClass || ''\"\n [style.display]=\"options?.notitle ? 'none' : ''\"\n [innerHTML]=\"options?.title\"></label>\n <ul class=\"checkbox-list\" [class.horizontal-list]=\"horizontalList\">\n <li *ngFor=\"let checkboxItem of checkboxList\"\n [class]=\"options?.htmlClass || ''\">\n <mat-checkbox type=\"checkbox\"\n [(ngModel)]=\"checkboxItem.checked\"\n [color]=\"options?.color || 'primary'\"\n [disabled]=\"controlDisabled || options?.readonly\"\n [name]=\"checkboxItem?.name\"\n (blur)=\"options.showErrors = true\"\n (change)=\"updateValue()\">\n <span class=\"checkbox-name\" [innerHTML]=\"checkboxItem?.name\"></span>\n </mat-checkbox>\n </li>\n </ul>\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n [innerHTML]=\"options?.errorMessage\"></mat-error>\n </div>",
styles: ["\n .title { font-weight: bold; }\n .checkbox-list { list-style-type: none; }\n .horizontal-list > li { display: inline-block; margin-right: 10px; zoom: 1; }\n .checkbox-name { white-space: nowrap; }\n mat-error { font-size: 75%; }\n "]
})
], MaterialCheckboxesComponent);
return MaterialCheckboxesComponent;
}());
export { MaterialCheckboxesComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwtY2hlY2tib3hlcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AYWpzZi9tYXRlcmlhbC8iLCJzb3VyY2VzIjpbImxpYi93aWRnZXRzL21hdGVyaWFsLWNoZWNrYm94ZXMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDckQsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLFlBQVksRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBRTNFLHFEQUFxRDtBQUNyRCx1REFBdUQ7QUErQ3ZEO0lBY0UscUNBQ1UsR0FBMEI7UUFBMUIsUUFBRyxHQUFILEdBQUcsQ0FBdUI7UUFYcEMsb0JBQWUsR0FBRyxLQUFLLENBQUM7UUFDeEIsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFFckIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFFdkIsaUJBQVksR0FBbUIsRUFBRSxDQUFDO0lBTzlCLENBQUM7SUFFTCw4Q0FBUSxHQUFSOztRQUNFLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDO1FBQzdDLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEtBQUssbUJBQW1CO1lBQ2hFLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxLQUFLLGlCQUFpQixDQUFDO1FBQzdDLElBQUksQ0FBQyxHQUFHLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDakMsSUFBSSxDQUFDLFlBQVksR0FBRyxhQUFhLENBQy9CLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLElBQUksQ0FDekUsQ0FBQztRQUNGLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsQ0FBQzs7Z0JBQ2hELEtBQTJCLElBQUEsS0FBQSxTQUFBLElBQUksQ0FBQyxZQUFZLENBQUEsZ0JBQUEsNEJBQUU7b0JBQXpDLElBQU0sWUFBWSxXQUFBO29CQUNyQixZQUFZLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztpQkFDckU7Ozs7Ozs7OztTQUNGO0lBQ0gsQ0FBQztJQUVELHNCQUFJLG1EQUFVO2FBQWQ7WUFDRSxPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDLFVBQUEsQ0FBQyxJQUFJLE9BQUEsQ0FBQyxDQUFDLE9BQU8sRUFBVCxDQUFTLENBQUMsQ0FBQyxNQUFNLEtBQUssSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUM7UUFDdEYsQ0FBQzs7O09BQUE7SUFFRCxzQkFBSSxvREFBVzthQUFmO1lBQ0UsSUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsT0FBTyxFQUFULENBQVMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztZQUNyRSxPQUFPLFlBQVksR0FBRyxDQUFDLElBQUksWUFBWSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDO1FBQ3JFLENBQUM7OztPQUFBO0lBRUQsaURBQVcsR0FBWDtRQUNFLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztRQUMvQixJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDckIsSUFBSSxDQUFDLEdBQUcsQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQzNEO0lBQ0gsQ0FBQztJQUVELHFEQUFlLEdBQWYsVUFBZ0IsS0FBVTtRQUN4QixJQUFJLENBQUMsT0FBTyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7UUFDL0IsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLEVBQXpCLENBQXlCLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQzs7Z0JBdkNjLHFCQUFxQjs7SUFMM0I7UUFBUixLQUFLLEVBQUU7bUVBQWlCO0lBQ2hCO1FBQVIsS0FBSyxFQUFFO29FQUF1QjtJQUN0QjtRQUFSLEtBQUssRUFBRTtrRUFBcUI7SUFabEIsMkJBQTJCO1FBN0N2QyxTQUFTLENBQUM7WUFDVCw4Q0FBOEM7WUFDOUMsUUFBUSxFQUFFLDRCQUE0QjtZQUN0QyxRQUFRLEVBQUUsZytDQWlDRDtxQkFDQSwyUEFNUjtTQUNGLENBQUM7T0FDVywyQkFBMkIsQ0F1RHZDO0lBQUQsa0NBQUM7Q0FBQSxBQXZERCxJQXVEQztTQXZEWSwyQkFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBidWlsZFRpdGxlTWFwIH0gZnJvbSAnQGNmc3RyYXRvcy9hanNmLWNvcmUnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBKc29uU2NoZW1hRm9ybVNlcnZpY2UsIFRpdGxlTWFwSXRlbSB9IGZyb20gJ0BjZnN0cmF0b3MvYWpzZi1jb3JlJztcblxuLy8gVE9ETzogQ2hhbmdlIHRoaXMgdG8gdXNlIGEgU2VsZWN0aW9uIExpc3QgaW5zdGVhZD9cbi8vIGh0dHBzOi8vbWF0ZXJpYWwuYW5ndWxhci5pby9jb21wb25lbnRzL2xpc3Qvb3ZlcnZpZXdcblxuQENvbXBvbmVudCh7XG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpjb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdtYXRlcmlhbC1jaGVja2JveGVzLXdpZGdldCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdj5cbiAgICAgIDxtYXQtY2hlY2tib3ggdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgW2NoZWNrZWRdPVwiYWxsQ2hlY2tlZFwiXG4gICAgICAgIFtjb2xvcl09XCJvcHRpb25zPy5jb2xvciB8fCAncHJpbWFyeSdcIlxuICAgICAgICBbZGlzYWJsZWRdPVwiY29udHJvbERpc2FibGVkIHx8IG9wdGlvbnM/LnJlYWRvbmx5XCJcbiAgICAgICAgW2luZGV0ZXJtaW5hdGVdPVwic29tZUNoZWNrZWRcIlxuICAgICAgICBbbmFtZV09XCJvcHRpb25zPy5uYW1lXCJcbiAgICAgICAgKGJsdXIpPVwib3B0aW9ucy5zaG93RXJyb3JzID0gdHJ1ZVwiXG4gICAgICAgIChjaGFuZ2UpPVwidXBkYXRlQWxsVmFsdWVzKCRldmVudClcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJjaGVja2JveC1uYW1lXCIgW2lubmVySFRNTF09XCJvcHRpb25zPy5uYW1lXCI+PC9zcGFuPlxuICAgICAgPC9tYXQtY2hlY2tib3g+XG4gICAgICA8bGFiZWwgKm5nSWY9XCJvcHRpb25zPy50aXRsZVwiXG4gICAgICAgIGNsYXNzPVwidGl0bGVcIlxuICAgICAgICBbY2xhc3NdPVwib3B0aW9ucz8ubGFiZWxIdG1sQ2xhc3MgfHwgJydcIlxuICAgICAgICBbc3R5bGUuZGlzcGxheV09XCJvcHRpb25zPy5ub3RpdGxlID8gJ25vbmUnIDogJydcIlxuICAgICAgICBbaW5uZXJIVE1MXT1cIm9wdGlvbnM/LnRpdGxlXCI+PC9sYWJlbD5cbiAgICAgIDx1bCBjbGFzcz1cImNoZWNrYm94LWxpc3RcIiBbY2xhc3MuaG9yaXpvbnRhbC1saXN0XT1cImhvcml6b250YWxMaXN0XCI+XG4gICAgICAgIDxsaSAqbmdGb3I9XCJsZXQgY2hlY2tib3hJdGVtIG9mIGNoZWNrYm94TGlzdFwiXG4gICAgICAgICAgW2NsYXNzXT1cIm9wdGlvbnM/Lmh0bWxDbGFzcyB8fCAnJ1wiPlxuICAgICAgICAgIDxtYXQtY2hlY2tib3ggdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgICAgIFsobmdNb2RlbCldPVwiY2hlY2tib3hJdGVtLmNoZWNrZWRcIlxuICAgICAgICAgICAgW2NvbG9yXT1cIm9wdGlvbnM/LmNvbG9yIHx8ICdwcmltYXJ5J1wiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiY29udHJvbERpc2FibGVkIHx8IG9wdGlvbnM/LnJlYWRvbmx5XCJcbiAgICAgICAgICAgIFtuYW1lXT1cImNoZWNrYm94SXRlbT8ubmFtZVwiXG4gICAgICAgICAgICAoYmx1cik9XCJvcHRpb25zLnNob3dFcnJvcnMgPSB0cnVlXCJcbiAgICAgICAgICAgIChjaGFuZ2UpPVwidXBkYXRlVmFsdWUoKVwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJjaGVja2JveC1uYW1lXCIgW2lubmVySFRNTF09XCJjaGVja2JveEl0ZW0/Lm5hbWVcIj48L3NwYW4+XG4gICAgICAgICAgPC9tYXQtY2hlY2tib3g+XG4gICAgICAgIDwvbGk+XG4gICAgICA8L3VsPlxuICAgICAgPG1hdC1lcnJvciAqbmdJZj1cIm9wdGlvbnM/LnNob3dFcnJvcnMgJiYgb3B0aW9ucz8uZXJyb3JNZXNzYWdlXCJcbiAgICAgICAgW2lubmVySFRNTF09XCJvcHRpb25zPy5lcnJvck1lc3NhZ2VcIj48L21hdC1lcnJvcj5cbiAgICA8L2Rpdj5gLFxuICBzdHlsZXM6IFtgXG4gICAgLnRpdGxlIHsgZm9udC13ZWlnaHQ6IGJvbGQ7IH1cbiAgICAuY2hlY2tib3gtbGlzdCB7IGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsgfVxuICAgIC5ob3Jpem9udGFsLWxpc3QgPiBsaSB7IGRpc3BsYXk6IGlubGluZS1ibG9jazsgbWFyZ2luLXJpZ2h0OiAxMHB4OyB6b29tOiAxOyB9XG4gICAgLmNoZWNrYm94LW5hbWUgeyB3aGl0ZS1zcGFjZTogbm93cmFwOyB9XG4gICAgbWF0LWVycm9yIHsgZm9udC1zaXplOiA3NSU7IH1cbiAgYF0sXG59KVxuZXhwb3J0IGNsYXNzIE1hdGVyaWFsQ2hlY2tib3hlc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIGZvcm1Db250cm9sOiBBYnN0cmFjdENvbnRyb2w7XG4gIGNvbnRyb2xOYW1lOiBzdHJpbmc7XG4gIGNvbnRyb2xWYWx1ZTogYW55O1xuICBjb250cm9sRGlzYWJsZWQgPSBmYWxzZTtcbiAgYm91bmRDb250cm9sID0gZmFsc2U7XG4gIG9wdGlvbnM6IGFueTtcbiAgaG9yaXpvbnRhbExpc3QgPSBmYWxzZTtcbiAgZm9ybUFycmF5OiBBYnN0cmFjdENvbnRyb2w7XG4gIGNoZWNrYm94TGlzdDogVGl0bGVNYXBJdGVtW10gPSBbXTtcbiAgQElucHV0KCkgbGF5b3V0Tm9kZTogYW55O1xuICBASW5wdXQoKSBsYXlvdXRJbmRleDogbnVtYmVyW107XG4gIEBJbnB1dCgpIGRhdGFJbmRleDogbnVtYmVyW107XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBqc2Y6IEpzb25TY2hlbWFGb3JtU2VydmljZVxuICApIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMub3B0aW9ucyA9IHRoaXMubGF5b3V0Tm9kZS5vcHRpb25zIHx8IHt9O1xuICAgIHRoaXMuaG9yaXpvbnRhbExpc3QgPSB0aGlzLmxheW91dE5vZGUudHlwZSA9PT0gJ2NoZWNrYm94ZXMtaW5saW5lJyB8fFxuICAgICAgdGhpcy5sYXlvdXROb2RlLnR5cGUgPT09ICdjaGVja2JveGJ1dHRvbnMnO1xuICAgIHRoaXMuanNmLmluaXRpYWxpemVDb250cm9sKHRoaXMpO1xuICAgIHRoaXMuY2hlY2tib3hMaXN0ID0gYnVpbGRUaXRsZU1hcChcbiAgICAgIHRoaXMub3B0aW9ucy50aXRsZU1hcCB8fCB0aGlzLm9wdGlvbnMuZW51bU5hbWVzLCB0aGlzLm9wdGlvbnMuZW51bSwgdHJ1ZVxuICAgICk7XG4gICAgaWYgKHRoaXMuYm91bmRDb250cm9sKSB7XG4gICAgICBjb25zdCBmb3JtQXJyYXkgPSB0aGlzLmpzZi5nZXRGb3JtQ29udHJvbCh0aGlzKTtcbiAgICAgIGZvciAoY29uc3QgY2hlY2tib3hJdGVtIG9mIHRoaXMuY2hlY2tib3hMaXN0KSB7XG4gICAgICAgIGNoZWNrYm94SXRlbS5jaGVja2VkID0gZm9ybUFycmF5LnZhbHVlLmluY2x1ZGVzKGNoZWNrYm94SXRlbS52YWx1ZSk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgZ2V0IGFsbENoZWNrZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuY2hlY2tib3hMaXN0LmZpbHRlcih0ID0+IHQuY2hlY2tlZCkubGVuZ3RoID09PSB0aGlzLmNoZWNrYm94TGlzdC5sZW5ndGg7XG4gIH1cblxuICBnZXQgc29tZUNoZWNrZWQoKTogYm9vbGVhbiB7XG4gICAgY29uc3QgY2hlY2tlZEl0ZW1zID0gdGhpcy5jaGVja2JveExpc3QuZmlsdGVyKHQgPT4gdC5jaGVja2VkKS5sZW5ndGg7XG4gICAgcmV0dXJuIGNoZWNrZWRJdGVtcyA+IDAgJiYgY2hlY2tlZEl0ZW1zIDwgdGhpcy5jaGVja2JveExpc3QubGVuZ3RoO1xuICB9XG5cbiAgdXBkYXRlVmFsdWUoKSB7XG4gICAgdGhpcy5vcHRpb25zLnNob3dFcnJvcnMgPSB0cnVlO1xuICAgIGlmICh0aGlzLmJvdW5kQ29udHJvbCkge1xuICAgICAgdGhpcy5qc2YudXBkYXRlQXJyYXlDaGVja2JveExpc3QodGhpcywgdGhpcy5jaGVja2JveExpc3QpO1xuICAgIH1cbiAgfVxuXG4gIHVwZGF0ZUFsbFZhbHVlcyhldmVudDogYW55KSB7XG4gICAgdGhpcy5vcHRpb25zLnNob3dFcnJvcnMgPSB0cnVlO1xuICAgIHRoaXMuY2hlY2tib3hMaXN0LmZvckVhY2godCA9PiB0LmNoZWNrZWQgPSBldmVudC5jaGVja2VkKTtcbiAgICB0aGlzLnVwZGF0ZVZhbHVlKCk7XG4gIH1cbn1cbiJdfQ==