@cfstratos/ajsf-material
Version:
Angular JSON Schema Form builder using Angular Material UI
60 lines (59 loc) • 12.2 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { JsonSchemaFormService } from '@cfstratos/ajsf-core';
var MaterialCheckboxComponent = /** @class */ (function () {
function MaterialCheckboxComponent(jsf) {
this.jsf = jsf;
this.controlDisabled = false;
this.boundControl = false;
this.trueValue = true;
this.falseValue = false;
this.showSlideToggle = false;
}
MaterialCheckboxComponent.prototype.ngOnInit = function () {
this.options = this.layoutNode.options || {};
this.jsf.initializeControl(this, !this.options.readonly);
if (this.controlValue === null || this.controlValue === undefined) {
this.controlValue = false;
this.jsf.updateValue(this, this.falseValue);
}
if (this.layoutNode.type === 'slide-toggle' ||
this.layoutNode.format === 'slide-toggle') {
this.showSlideToggle = true;
}
};
MaterialCheckboxComponent.prototype.updateValue = function (event) {
this.options.showErrors = true;
this.jsf.updateValue(this, event.checked ? this.trueValue : this.falseValue);
};
Object.defineProperty(MaterialCheckboxComponent.prototype, "isChecked", {
get: function () {
return this.jsf.getFormControlValue(this) === this.trueValue;
},
enumerable: true,
configurable: true
});
MaterialCheckboxComponent.ctorParameters = function () { return [
{ type: JsonSchemaFormService }
]; };
__decorate([
Input()
], MaterialCheckboxComponent.prototype, "layoutNode", void 0);
__decorate([
Input()
], MaterialCheckboxComponent.prototype, "layoutIndex", void 0);
__decorate([
Input()
], MaterialCheckboxComponent.prototype, "dataIndex", void 0);
MaterialCheckboxComponent = __decorate([
Component({
// tslint:disable-next-line:component-selector
selector: 'material-checkbox-widget',
template: "\n <mat-checkbox *ngIf=\"boundControl && !showSlideToggle\"\n [formControl]=\"formControl\"\n align=\"left\"\n [color]=\"options?.color || 'primary'\"\n [id]=\"'control' + layoutNode?._id\"\n labelPosition=\"after\"\n [name]=\"controlName\"\n (blur)=\"options.showErrors = true\">\n <span *ngIf=\"options?.title\"\n class=\"checkbox-name\"\n [style.display]=\"options?.notitle ? 'none' : ''\"\n [innerHTML]=\"options?.title\"></span>\n </mat-checkbox>\n <mat-checkbox *ngIf=\"!boundControl && !showSlideToggle\"\n align=\"left\"\n [color]=\"options?.color || 'primary'\"\n [disabled]=\"controlDisabled || options?.readonly\"\n [id]=\"'control' + layoutNode?._id\"\n labelPosition=\"after\"\n [name]=\"controlName\"\n [checked]=\"isChecked\"\n (blur)=\"options.showErrors = true\"\n (change)=\"updateValue($event)\">\n <span *ngIf=\"options?.title\"\n class=\"checkbox-name\"\n [style.display]=\"options?.notitle ? 'none' : ''\"\n [innerHTML]=\"options?.title\"></span>\n </mat-checkbox>\n <mat-slide-toggle *ngIf=\"boundControl && showSlideToggle\"\n [formControl]=\"formControl\"\n align=\"left\"\n [color]=\"options?.color || 'primary'\"\n [id]=\"'control' + layoutNode?._id\"\n labelPosition=\"after\"\n [name]=\"controlName\"\n (blur)=\"options.showErrors = true\">\n <span *ngIf=\"options?.title\"\n class=\"checkbox-name\"\n [style.display]=\"options?.notitle ? 'none' : ''\"\n [innerHTML]=\"options?.title\"></span>\n </mat-slide-toggle>\n <mat-slide-toggle *ngIf=\"!boundControl && showSlideToggle\"\n align=\"left\"\n [color]=\"options?.color || 'primary'\"\n [disabled]=\"controlDisabled || options?.readonly\"\n [id]=\"'control' + layoutNode?._id\"\n labelPosition=\"after\"\n [name]=\"controlName\"\n [checked]=\"isChecked\"\n (blur)=\"options.showErrors = true\"\n (change)=\"updateValue($event)\">\n <span *ngIf=\"options?.title\"\n class=\"checkbox-name\"\n [style.display]=\"options?.notitle ? 'none' : ''\"\n [innerHTML]=\"options?.title\"></span>\n </mat-slide-toggle>\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\n [innerHTML]=\"options?.errorMessage\"></mat-error>",
styles: ["\n .checkbox-name { white-space: nowrap; }\n mat-error { font-size: 75%; }\n "]
})
], MaterialCheckboxComponent);
return MaterialCheckboxComponent;
}());
export { MaterialCheckboxComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwtY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFqc2YvbWF0ZXJpYWwvIiwic291cmNlcyI6WyJsaWIvd2lkZ2V0cy9tYXRlcmlhbC1jaGVja2JveC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBRXpELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBcUU3RDtJQWNFLG1DQUNVLEdBQTBCO1FBQTFCLFFBQUcsR0FBSCxHQUFHLENBQXVCO1FBWHBDLG9CQUFlLEdBQUcsS0FBSyxDQUFDO1FBQ3hCLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRXJCLGNBQVMsR0FBUSxJQUFJLENBQUM7UUFDdEIsZUFBVSxHQUFRLEtBQUssQ0FBQztRQUN4QixvQkFBZSxHQUFHLEtBQUssQ0FBQztJQU9wQixDQUFDO0lBRUwsNENBQVEsR0FBUjtRQUNFLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDO1FBQzdDLElBQUksQ0FBQyxHQUFHLENBQUMsaUJBQWlCLENBQUMsSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN6RCxJQUFJLElBQUksQ0FBQyxZQUFZLEtBQUssSUFBSSxJQUFJLElBQUksQ0FBQyxZQUFZLEtBQUssU0FBUyxFQUFFO1lBQ2pFLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1lBQzFCLElBQUksQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7U0FDN0M7UUFDRCxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxLQUFLLGNBQWM7WUFDekMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEtBQUssY0FBYyxFQUN6QztZQUNBLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO1NBQzdCO0lBQ0gsQ0FBQztJQUVELCtDQUFXLEdBQVgsVUFBWSxLQUFLO1FBQ2YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1FBQy9CLElBQUksQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDL0UsQ0FBQztJQUVELHNCQUFJLGdEQUFTO2FBQWI7WUFDRSxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUMvRCxDQUFDOzs7T0FBQTs7Z0JBeEJjLHFCQUFxQjs7SUFMM0I7UUFBUixLQUFLLEVBQUU7aUVBQWlCO0lBQ2hCO1FBQVIsS0FBSyxFQUFFO2tFQUF1QjtJQUN0QjtRQUFSLEtBQUssRUFBRTtnRUFBcUI7SUFabEIseUJBQXlCO1FBbkVyQyxTQUFTLENBQUM7WUFDVCw4Q0FBOEM7WUFDOUMsUUFBUSxFQUFFLDBCQUEwQjtZQUNwQyxRQUFRLEVBQUUscTJFQTBEMkM7cUJBQzVDLHNGQUdSO1NBQ0YsQ0FBQztPQUNXLHlCQUF5QixDQXdDckM7SUFBRCxnQ0FBQztDQUFBLEFBeENELElBd0NDO1NBeENZLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWJzdHJhY3RDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgSnNvblNjaGVtYUZvcm1TZXJ2aWNlIH0gZnJvbSAnQGNmc3RyYXRvcy9hanNmLWNvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmNvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ21hdGVyaWFsLWNoZWNrYm94LXdpZGdldCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1jaGVja2JveCAqbmdJZj1cImJvdW5kQ29udHJvbCAmJiAhc2hvd1NsaWRlVG9nZ2xlXCJcbiAgICAgIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiXG4gICAgICBhbGlnbj1cImxlZnRcIlxuICAgICAgW2NvbG9yXT1cIm9wdGlvbnM/LmNvbG9yIHx8ICdwcmltYXJ5J1wiXG4gICAgICBbaWRdPVwiJ2NvbnRyb2wnICsgbGF5b3V0Tm9kZT8uX2lkXCJcbiAgICAgIGxhYmVsUG9zaXRpb249XCJhZnRlclwiXG4gICAgICBbbmFtZV09XCJjb250cm9sTmFtZVwiXG4gICAgICAoYmx1cik9XCJvcHRpb25zLnNob3dFcnJvcnMgPSB0cnVlXCI+XG4gICAgICA8c3BhbiAqbmdJZj1cIm9wdGlvbnM/LnRpdGxlXCJcbiAgICAgICAgY2xhc3M9XCJjaGVja2JveC1uYW1lXCJcbiAgICAgICAgW3N0eWxlLmRpc3BsYXldPVwib3B0aW9ucz8ubm90aXRsZSA/ICdub25lJyA6ICcnXCJcbiAgICAgICAgW2lubmVySFRNTF09XCJvcHRpb25zPy50aXRsZVwiPjwvc3Bhbj5cbiAgICA8L21hdC1jaGVja2JveD5cbiAgICA8bWF0LWNoZWNrYm94ICpuZ0lmPVwiIWJvdW5kQ29udHJvbCAmJiAhc2hvd1NsaWRlVG9nZ2xlXCJcbiAgICAgIGFsaWduPVwibGVmdFwiXG4gICAgICBbY29sb3JdPVwib3B0aW9ucz8uY29sb3IgfHwgJ3ByaW1hcnknXCJcbiAgICAgIFtkaXNhYmxlZF09XCJjb250cm9sRGlzYWJsZWQgfHwgb3B0aW9ucz8ucmVhZG9ubHlcIlxuICAgICAgW2lkXT1cIidjb250cm9sJyArIGxheW91dE5vZGU/Ll9pZFwiXG4gICAgICBsYWJlbFBvc2l0aW9uPVwiYWZ0ZXJcIlxuICAgICAgW25hbWVdPVwiY29udHJvbE5hbWVcIlxuICAgICAgW2NoZWNrZWRdPVwiaXNDaGVja2VkXCJcbiAgICAgIChibHVyKT1cIm9wdGlvbnMuc2hvd0Vycm9ycyA9IHRydWVcIlxuICAgICAgKGNoYW5nZSk9XCJ1cGRhdGVWYWx1ZSgkZXZlbnQpXCI+XG4gICAgICA8c3BhbiAqbmdJZj1cIm9wdGlvbnM/LnRpdGxlXCJcbiAgICAgICAgY2xhc3M9XCJjaGVja2JveC1uYW1lXCJcbiAgICAgICAgW3N0eWxlLmRpc3BsYXldPVwib3B0aW9ucz8ubm90aXRsZSA/ICdub25lJyA6ICcnXCJcbiAgICAgICAgW2lubmVySFRNTF09XCJvcHRpb25zPy50aXRsZVwiPjwvc3Bhbj5cbiAgICA8L21hdC1jaGVja2JveD5cbiAgICA8bWF0LXNsaWRlLXRvZ2dsZSAqbmdJZj1cImJvdW5kQ29udHJvbCAmJiBzaG93U2xpZGVUb2dnbGVcIlxuICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcbiAgICAgIGFsaWduPVwibGVmdFwiXG4gICAgICBbY29sb3JdPVwib3B0aW9ucz8uY29sb3IgfHwgJ3ByaW1hcnknXCJcbiAgICAgIFtpZF09XCInY29udHJvbCcgKyBsYXlvdXROb2RlPy5faWRcIlxuICAgICAgbGFiZWxQb3NpdGlvbj1cImFmdGVyXCJcbiAgICAgIFtuYW1lXT1cImNvbnRyb2xOYW1lXCJcbiAgICAgIChibHVyKT1cIm9wdGlvbnMuc2hvd0Vycm9ycyA9IHRydWVcIj5cbiAgICAgIDxzcGFuICpuZ0lmPVwib3B0aW9ucz8udGl0bGVcIlxuICAgICAgICBjbGFzcz1cImNoZWNrYm94LW5hbWVcIlxuICAgICAgICBbc3R5bGUuZGlzcGxheV09XCJvcHRpb25zPy5ub3RpdGxlID8gJ25vbmUnIDogJydcIlxuICAgICAgICBbaW5uZXJIVE1MXT1cIm9wdGlvbnM/LnRpdGxlXCI+PC9zcGFuPlxuICAgIDwvbWF0LXNsaWRlLXRvZ2dsZT5cbiAgICA8bWF0LXNsaWRlLXRvZ2dsZSAqbmdJZj1cIiFib3VuZENvbnRyb2wgJiYgc2hvd1NsaWRlVG9nZ2xlXCJcbiAgICAgIGFsaWduPVwibGVmdFwiXG4gICAgICBbY29sb3JdPVwib3B0aW9ucz8uY29sb3IgfHwgJ3ByaW1hcnknXCJcbiAgICAgIFtkaXNhYmxlZF09XCJjb250cm9sRGlzYWJsZWQgfHwgb3B0aW9ucz8ucmVhZG9ubHlcIlxuICAgICAgW2lkXT1cIidjb250cm9sJyArIGxheW91dE5vZGU/Ll9pZFwiXG4gICAgICBsYWJlbFBvc2l0aW9uPVwiYWZ0ZXJcIlxuICAgICAgW25hbWVdPVwiY29udHJvbE5hbWVcIlxuICAgICAgW2NoZWNrZWRdPVwiaXNDaGVja2VkXCJcbiAgICAgIChibHVyKT1cIm9wdGlvbnMuc2hvd0Vycm9ycyA9IHRydWVcIlxuICAgICAgKGNoYW5nZSk9XCJ1cGRhdGVWYWx1ZSgkZXZlbnQpXCI+XG4gICAgICA8c3BhbiAqbmdJZj1cIm9wdGlvbnM/LnRpdGxlXCJcbiAgICAgICAgY2xhc3M9XCJjaGVja2JveC1uYW1lXCJcbiAgICAgICAgW3N0eWxlLmRpc3BsYXldPVwib3B0aW9ucz8ubm90aXRsZSA/ICdub25lJyA6ICcnXCJcbiAgICAgICAgW2lubmVySFRNTF09XCJvcHRpb25zPy50aXRsZVwiPjwvc3Bhbj5cbiAgICA8L21hdC1zbGlkZS10b2dnbGU+XG4gICAgPG1hdC1lcnJvciAqbmdJZj1cIm9wdGlvbnM/LnNob3dFcnJvcnMgJiYgb3B0aW9ucz8uZXJyb3JNZXNzYWdlXCJcbiAgICAgIFtpbm5lckhUTUxdPVwib3B0aW9ucz8uZXJyb3JNZXNzYWdlXCI+PC9tYXQtZXJyb3I+YCxcbiAgc3R5bGVzOiBbYFxuICAgIC5jaGVja2JveC1uYW1lIHsgd2hpdGUtc3BhY2U6IG5vd3JhcDsgfVxuICAgIG1hdC1lcnJvciB7IGZvbnQtc2l6ZTogNzUlOyB9XG4gIGBdLFxufSlcbmV4cG9ydCBjbGFzcyBNYXRlcmlhbENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgZm9ybUNvbnRyb2w6IEFic3RyYWN0Q29udHJvbDtcbiAgY29udHJvbE5hbWU6IHN0cmluZztcbiAgY29udHJvbFZhbHVlOiBhbnk7XG4gIGNvbnRyb2xEaXNhYmxlZCA9IGZhbHNlO1xuICBib3VuZENvbnRyb2wgPSBmYWxzZTtcbiAgb3B0aW9uczogYW55O1xuICB0cnVlVmFsdWU6IGFueSA9IHRydWU7XG4gIGZhbHNlVmFsdWU6IGFueSA9IGZhbHNlO1xuICBzaG93U2xpZGVUb2dnbGUgPSBmYWxzZTtcbiAgQElucHV0KCkgbGF5b3V0Tm9kZTogYW55O1xuICBASW5wdXQoKSBsYXlvdXRJbmRleDogbnVtYmVyW107XG4gIEBJbnB1dCgpIGRhdGFJbmRleDogbnVtYmVyW107XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBqc2Y6IEpzb25TY2hlbWFGb3JtU2VydmljZVxuICApIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMub3B0aW9ucyA9IHRoaXMubGF5b3V0Tm9kZS5vcHRpb25zIHx8IHt9O1xuICAgIHRoaXMuanNmLmluaXRpYWxpemVDb250cm9sKHRoaXMsICF0aGlzLm9wdGlvbnMucmVhZG9ubHkpO1xuICAgIGlmICh0aGlzLmNvbnRyb2xWYWx1ZSA9PT0gbnVsbCB8fCB0aGlzLmNvbnRyb2xWYWx1ZSA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICB0aGlzLmNvbnRyb2xWYWx1ZSA9IGZhbHNlO1xuICAgICAgdGhpcy5qc2YudXBkYXRlVmFsdWUodGhpcywgdGhpcy5mYWxzZVZhbHVlKTtcbiAgICB9XG4gICAgaWYgKHRoaXMubGF5b3V0Tm9kZS50eXBlID09PSAnc2xpZGUtdG9nZ2xlJyB8fFxuICAgICAgdGhpcy5sYXlvdXROb2RlLmZvcm1hdCA9PT0gJ3NsaWRlLXRvZ2dsZSdcbiAgICApIHtcbiAgICAgIHRoaXMuc2hvd1NsaWRlVG9nZ2xlID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICB1cGRhdGVWYWx1ZShldmVudCkge1xuICAgIHRoaXMub3B0aW9ucy5zaG93RXJyb3JzID0gdHJ1ZTtcbiAgICB0aGlzLmpzZi51cGRhdGVWYWx1ZSh0aGlzLCBldmVudC5jaGVja2VkID8gdGhpcy50cnVlVmFsdWUgOiB0aGlzLmZhbHNlVmFsdWUpO1xuICB9XG5cbiAgZ2V0IGlzQ2hlY2tlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5qc2YuZ2V0Rm9ybUNvbnRyb2xWYWx1ZSh0aGlzKSA9PT0gdGhpcy50cnVlVmFsdWU7XG4gIH1cbn1cbiJdfQ==