UNPKG

ddata-ui-input

Version:

DData UI Input module, components, models & services

85 lines 11.9 kB
import { Component, EventEmitter, Input, Output } from '@angular/core'; import { faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons'; import { BaseModel } from 'ddata-core'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; import * as i2 from "@fortawesome/angular-fontawesome"; export class DdataInputCheckboxComponent { constructor() { // tslint:disable: variable-name this._model = new BaseModel(); this._field = 'isValid'; this._label = ''; this.disabled = false; this.showLabel = true; this.showLabelAfter = true; this.labelClass = 'col pl-2 col-form-label'; this.wrapperClass = 'd-flex'; this.iconOn = faCheckSquare; this.iconOff = faSquare; this.changed = new EventEmitter(); this.iterable = 0; } set model(value) { if (!value) { value = new BaseModel(); } this._model = value; if (!!this._model.fields) { if (!!this._model.fields[this._field]) { this._label = this._model.fields[this._field].label ?? ''; } } } get model() { return this._model; } set field(value) { if (value === 'undefined') { value = 'isValid'; } this._field = value; } get field() { return this._field; } ngOnInit() { this.iterable = Math.floor(Math.random() * 100); } clicked() { if (!this.disabled) { this.model[this._field] = !this.model[this._field]; this.changed.emit(this.model[this._field]); } } getIcon() { return !!this.model[this._field] ? this.iconOn : this.iconOff; } } DdataInputCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DdataInputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); DdataInputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: DdataInputCheckboxComponent, selector: "dd-input-checkbox", inputs: { disabled: "disabled", model: "model", field: "field", showLabel: "showLabel", showLabelAfter: "showLabelAfter", labelClass: "labelClass", wrapperClass: "wrapperClass", iconOn: "iconOn", iconOff: "iconOff" }, outputs: { changed: "changed" }, ngImport: i0, template: "<div [class]=\"wrapperClass\">\n\n <label *ngIf=\"showLabel && !showLabelAfter\"\n [class]=\"labelClass\"\n [class.disabled]=\"disabled\"\n [for]=\"_field + iterable\"\n >\n {{ _label }}:\n </label>\n\n <button type=\"button\" class=\"btn btn-light\"\n (click)=\"clicked()\"\n [disabled]=\"disabled\"\n [id]=\"_field + iterable\"\n [name]=\"_field + iterable\"\n [title]=\"_label\"\n >\n <fa-icon [icon]=\"getIcon()\"></fa-icon>\n </button>\n\n <label *ngIf=\"showLabel && showLabelAfter\"\n [class]=\"labelClass\"\n [class.disabled]=\"disabled\"\n [for]=\"_field + iterable\"\n >\n {{ _label }}\n </label>\n\n</div>\n", styles: [".disabled{opacity:.3}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: DdataInputCheckboxComponent, decorators: [{ type: Component, args: [{ selector: 'dd-input-checkbox', template: "<div [class]=\"wrapperClass\">\n\n <label *ngIf=\"showLabel && !showLabelAfter\"\n [class]=\"labelClass\"\n [class.disabled]=\"disabled\"\n [for]=\"_field + iterable\"\n >\n {{ _label }}:\n </label>\n\n <button type=\"button\" class=\"btn btn-light\"\n (click)=\"clicked()\"\n [disabled]=\"disabled\"\n [id]=\"_field + iterable\"\n [name]=\"_field + iterable\"\n [title]=\"_label\"\n >\n <fa-icon [icon]=\"getIcon()\"></fa-icon>\n </button>\n\n <label *ngIf=\"showLabel && showLabelAfter\"\n [class]=\"labelClass\"\n [class.disabled]=\"disabled\"\n [for]=\"_field + iterable\"\n >\n {{ _label }}\n </label>\n\n</div>\n", styles: [".disabled{opacity:.3}\n"] }] }], ctorParameters: function () { return []; }, propDecorators: { disabled: [{ type: Input }], model: [{ type: Input }], field: [{ type: Input }], showLabel: [{ type: Input }], showLabelAfter: [{ type: Input }], labelClass: [{ type: Input }], wrapperClass: [{ type: Input }], iconOn: [{ type: Input }], iconOff: [{ type: Input }], changed: [{ type: Output }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGRhdGEtdWktaW5wdXQvc3JjL2xpYi9jb21wb25lbnRzL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RkYXRhLXVpLWlucHV0L3NyYy9saWIvY29tcG9uZW50cy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRS9FLE9BQU8sRUFBRSxhQUFhLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDNUUsT0FBTyxFQUFFLFNBQVMsRUFBdUMsTUFBTSxZQUFZLENBQUM7Ozs7QUFPNUUsTUFBTSxPQUFPLDJCQUEyQjtJQTRDdEM7UUEzQ0EsZ0NBQWdDO1FBQ2hDLFdBQU0sR0FBbUQsSUFBSSxTQUFTLEVBQUUsQ0FBQztRQUN6RSxXQUFNLEdBQUcsU0FBUyxDQUFDO1FBQ25CLFdBQU0sR0FBRyxFQUFFLENBQUM7UUFFSCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBMkJqQixjQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ2pCLG1CQUFjLEdBQUcsSUFBSSxDQUFDO1FBQ3RCLGVBQVUsR0FBRyx5QkFBeUIsQ0FBQztRQUN2QyxpQkFBWSxHQUFHLFFBQVEsQ0FBQztRQUN4QixXQUFNLEdBQW1CLGFBQWEsQ0FBQztRQUN2QyxZQUFPLEdBQW1CLFFBQVEsQ0FBQztRQUVsQyxZQUFPLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFOUQsYUFBUSxHQUFHLENBQUMsQ0FBQztJQUVHLENBQUM7SUFyQ2pCLElBQWEsS0FBSyxDQUFDLEtBQTREO1FBQzdFLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDVixLQUFLLEdBQUcsSUFBSSxTQUFTLEVBQUUsQ0FBQztTQUN6QjtRQUVELElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1FBRXBCLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxFQUFFO1lBQ3hCLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsRUFBRTtnQkFDckMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQzthQUMzRDtTQUNGO0lBQ0gsQ0FBQztJQUNELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBQ0QsSUFBYSxLQUFLLENBQUMsS0FBYTtRQUM5QixJQUFJLEtBQUssS0FBSyxXQUFXLEVBQUU7WUFDekIsS0FBSyxHQUFHLFNBQVMsQ0FBQztTQUNuQjtRQUVELElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7SUFDRCxJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQWNELFFBQVE7UUFDTixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLEdBQUcsQ0FBQyxDQUFDO0lBQ2xELENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUNuRCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBRSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBRSxDQUFDO1NBQzlDO0lBQ0gsQ0FBQztJQUVELE9BQU87UUFDTCxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUNoRSxDQUFDOzt3SEEzRFUsMkJBQTJCOzRHQUEzQiwyQkFBMkIsb1RDVnhDLHFxQkE2QkE7MkZEbkJhLDJCQUEyQjtrQkFMdkMsU0FBUzsrQkFDRSxtQkFBbUI7MEVBVXBCLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ08sS0FBSztzQkFBakIsS0FBSztnQkFnQk8sS0FBSztzQkFBakIsS0FBSztnQkFVRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBRUksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25EZWZpbml0aW9uIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZvbnRhd2Vzb21lLXN2Zy1jb3JlJztcbmltcG9ydCB7IGZhQ2hlY2tTcXVhcmUsIGZhU3F1YXJlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZyZWUtc29saWQtc3ZnLWljb25zJztcbmltcG9ydCB7IEJhc2VNb2RlbCwgQmFzZU1vZGVsSW50ZXJmYWNlLCBGaWVsZHNJbnRlcmZhY2UgfSBmcm9tICdkZGF0YS1jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZGQtaW5wdXQtY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGVja2JveC5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGRhdGFJbnB1dENoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLy8gdHNsaW50OmRpc2FibGU6IHZhcmlhYmxlLW5hbWVcbiAgX21vZGVsOiBCYXNlTW9kZWxJbnRlcmZhY2U8YW55PiAmIEZpZWxkc0ludGVyZmFjZTxhbnk+ID0gbmV3IEJhc2VNb2RlbCgpO1xuICBfZmllbGQgPSAnaXNWYWxpZCc7XG4gIF9sYWJlbCA9ICcnO1xuXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNldCBtb2RlbCh2YWx1ZTogQmFzZU1vZGVsSW50ZXJmYWNlPGFueT4gJiBGaWVsZHNJbnRlcmZhY2U8YW55PiB8IG51bGwpIHtcbiAgICBpZiAoIXZhbHVlKSB7XG4gICAgICB2YWx1ZSA9IG5ldyBCYXNlTW9kZWwoKTtcbiAgICB9XG5cbiAgICB0aGlzLl9tb2RlbCA9IHZhbHVlO1xuXG4gICAgaWYgKCEhdGhpcy5fbW9kZWwuZmllbGRzKSB7XG4gICAgICBpZiAoISF0aGlzLl9tb2RlbC5maWVsZHNbdGhpcy5fZmllbGRdKSB7XG4gICAgICAgIHRoaXMuX2xhYmVsID0gdGhpcy5fbW9kZWwuZmllbGRzW3RoaXMuX2ZpZWxkXS5sYWJlbCA/PyAnJztcbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgZ2V0IG1vZGVsKCk6IEJhc2VNb2RlbEludGVyZmFjZTxhbnk+ICYgRmllbGRzSW50ZXJmYWNlPGFueT4ge1xuICAgIHJldHVybiB0aGlzLl9tb2RlbDtcbiAgfVxuICBASW5wdXQoKSBzZXQgZmllbGQodmFsdWU6IHN0cmluZykge1xuICAgIGlmICh2YWx1ZSA9PT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHZhbHVlID0gJ2lzVmFsaWQnO1xuICAgIH1cblxuICAgIHRoaXMuX2ZpZWxkID0gdmFsdWU7XG4gIH1cbiAgZ2V0IGZpZWxkKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX2ZpZWxkO1xuICB9XG4gIEBJbnB1dCgpIHNob3dMYWJlbCA9IHRydWU7XG4gIEBJbnB1dCgpIHNob3dMYWJlbEFmdGVyID0gdHJ1ZTtcbiAgQElucHV0KCkgbGFiZWxDbGFzcyA9ICdjb2wgcGwtMiBjb2wtZm9ybS1sYWJlbCc7XG4gIEBJbnB1dCgpIHdyYXBwZXJDbGFzcyA9ICdkLWZsZXgnO1xuICBASW5wdXQoKSBpY29uT246IEljb25EZWZpbml0aW9uID0gZmFDaGVja1NxdWFyZTtcbiAgQElucHV0KCkgaWNvbk9mZjogSWNvbkRlZmluaXRpb24gPSBmYVNxdWFyZTtcblxuICBAT3V0cHV0KCkgY2hhbmdlZDogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGl0ZXJhYmxlID0gMDtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaXRlcmFibGUgPSBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAxMDApO1xuICB9XG5cbiAgY2xpY2tlZCgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMubW9kZWxbdGhpcy5fZmllbGRdID0gIXRoaXMubW9kZWxbdGhpcy5fZmllbGRdO1xuICAgICAgdGhpcy5jaGFuZ2VkLmVtaXQoIHRoaXMubW9kZWxbdGhpcy5fZmllbGRdICk7XG4gICAgfVxuICB9XG5cbiAgZ2V0SWNvbigpOiBJY29uRGVmaW5pdGlvbiB7XG4gICAgcmV0dXJuICEhdGhpcy5tb2RlbFt0aGlzLl9maWVsZF0gPyB0aGlzLmljb25PbiA6IHRoaXMuaWNvbk9mZjtcbiAgfVxufVxuIiwiPGRpdiBbY2xhc3NdPVwid3JhcHBlckNsYXNzXCI+XG5cbiAgPGxhYmVsICpuZ0lmPVwic2hvd0xhYmVsICYmICFzaG93TGFiZWxBZnRlclwiXG4gICAgW2NsYXNzXT1cImxhYmVsQ2xhc3NcIlxuICAgIFtjbGFzcy5kaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgW2Zvcl09XCJfZmllbGQgKyBpdGVyYWJsZVwiXG4gICAgPlxuICAgIHt7IF9sYWJlbCB9fTpcbiAgPC9sYWJlbD5cblxuICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImJ0biBidG4tbGlnaHRcIlxuICAgIChjbGljayk9XCJjbGlja2VkKClcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgW2lkXT1cIl9maWVsZCArIGl0ZXJhYmxlXCJcbiAgICBbbmFtZV09XCJfZmllbGQgKyBpdGVyYWJsZVwiXG4gICAgW3RpdGxlXT1cIl9sYWJlbFwiXG4gICAgPlxuICAgIDxmYS1pY29uIFtpY29uXT1cImdldEljb24oKVwiPjwvZmEtaWNvbj5cbiAgPC9idXR0b24+XG5cbiAgPGxhYmVsICpuZ0lmPVwic2hvd0xhYmVsICYmIHNob3dMYWJlbEFmdGVyXCJcbiAgICBbY2xhc3NdPVwibGFiZWxDbGFzc1wiXG4gICAgW2NsYXNzLmRpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbZm9yXT1cIl9maWVsZCArIGl0ZXJhYmxlXCJcbiAgICA+XG4gICAge3sgX2xhYmVsIH19XG4gIDwvbGFiZWw+XG5cbjwvZGl2PlxuIl19