tibas-form-json-generator
Version:
Fully configured form generator via JSON data with a custom template for each attribute + onChange events.
190 lines • 14.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/label-editable/label-editable.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ElementRef, forwardRef, Input, Renderer, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/** @type {?} */
const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => LabelEditableComponent)),
multi: true
};
export class LabelEditableComponent {
/**
* @param {?} element
* @param {?} _renderer
*/
constructor(element, _renderer) {
this._renderer = _renderer;
// input DOM element
this.label = ''; // Label value for input element
// Label value for input element
this.type = 'text'; // The type of input element
// The type of input element
this.required = true; // Is input requried?
// Is input requried?
this.disabled = false; // Is input disabled?
// Is input disabled?
this._value = ''; // Private variable for input value
// Private variable for input value
this.preValue = ''; // The value before clicking to edit
// The value before clicking to edit
this.editing = true; // Is Component in edit mode?
// Is Component in edit mode?
this.onChange = Function.prototype; // Trascend the onChange event
// Trascend the onChange event
this.onTouched = Function.prototype; // Trascend the onTouch event
this.editing = true;
}
// Trascend the onTouch event
// Control Value Accessors for ngModel
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (v !== this._value) {
this._value = v;
this.onChange(v);
}
}
// Required for ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this._value = value;
}
// Required forControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
// Required forControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
// Do stuff when the input element loses focus
/**
* @param {?} $event
* @return {?}
*/
onBlur($event) {
if (this._value !== '' && this._value) {
this.editing = false;
}
}
/**
* @param {?} $event
* @return {?}
*/
onClose($event) {
if (this._value !== '' && this._value) {
this.editing = false;
}
}
// Start the editting process for the input element
/**
* @param {?} value
* @return {?}
*/
edit(value) {
if (this.disabled) {
return;
}
this.preValue = value;
this.editing = true;
// Focus on the input element just as the editing begins
if (this.labelEditControl) {
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => this._renderer.invokeElementMethod(this.labelEditControl, 'focus', [])));
}
}
/**
* @return {?}
*/
ngOnInit() {
this._renderer.listen('window', 'click', (/**
* @param {?} e
* @return {?}
*/
(e) => {
if (this.labelEditControl && this.labelEditControl.nativeElement && e.target !== this.labelEditControl.nativeElement) {
if (this._value !== '' && this._value) {
this.editing = false;
}
}
}));
this.editing = true;
}
}
LabelEditableComponent.decorators = [
{ type: Component, args: [{
selector: 'app-label-edit',
template: "<div class=\"labeleditable\" style=\"display: inline-block;white-space: nowrap!important;overflow: scroll;width: 70%;margin-right: 1rem;padding: 2px;height: 43px\" [ngStyle]=\"{'padding-top':editing?'2px':'12px'}\">\n <div *ngIf=\"editing\" (focusout)=\"onClose($event)\">\n <input #labelEditControl class=\"attInput additeminput\"\n type=\"text\" [required]=\"required\" (blur)=\"onBlur($event)\" (keydown.enter)='$event.target.blur()' (focusout)=\"onClose($event)\" [name]=\"value\" [(ngModel)]=\"value\" [type]=\"type\" [placeholder]=\"label\" />\n </div>\n <div *ngIf=\"!editing\" >\n <div title=\"Modifier\" class=\"cell\" (click)=\"edit(value)\" (focus)=\"edit(value);\" tabindex=\"0\" >{{value}} <i class=\"fa fa-pencil\"></i></div>\n </div>\n</div>\n\n",
providers: [INLINE_EDIT_CONTROL_VALUE_ACCESSOR],
styles: [".cell{border:1px solid transparent}.cell:hover{cursor:pointer;border:1px dashed #c8c8c8}"]
}] }
];
/** @nocollapse */
LabelEditableComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer }
];
LabelEditableComponent.propDecorators = {
labelEditControl: [{ type: ViewChild, args: ['labelEditControl', { static: false },] }],
label: [{ type: Input }],
type: [{ type: Input }],
required: [{ type: Input }],
disabled: [{ type: Input }]
};
if (false) {
/** @type {?} */
LabelEditableComponent.prototype.labelEditControl;
/** @type {?} */
LabelEditableComponent.prototype.label;
/** @type {?} */
LabelEditableComponent.prototype.type;
/** @type {?} */
LabelEditableComponent.prototype.required;
/** @type {?} */
LabelEditableComponent.prototype.disabled;
/** @type {?} */
LabelEditableComponent.prototype._value;
/** @type {?} */
LabelEditableComponent.prototype.preValue;
/** @type {?} */
LabelEditableComponent.prototype.editing;
/** @type {?} */
LabelEditableComponent.prototype.onChange;
/** @type {?} */
LabelEditableComponent.prototype.onTouched;
/**
* @type {?}
* @private
*/
LabelEditableComponent.prototype._renderer;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFiZWwtZWRpdGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vdGliYXMtZm9ybS1qc29uLWdlbmVyYXRvci8iLCJzb3VyY2VzIjpbImxpYi9sYWJlbC1lZGl0YWJsZS9sYWJlbC1lZGl0YWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFVLFFBQVEsRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDcEcsT0FBTyxFQUF1QixpQkFBaUIsRUFBQyxNQUFNLGdCQUFnQixDQUFDOztNQUVqRSxrQ0FBa0MsR0FBRztJQUN6QyxPQUFPLEVBQUUsaUJBQWlCO0lBQzFCLFdBQVcsRUFBRSxVQUFVOzs7SUFBQyxHQUFHLEVBQUUsQ0FBQyxzQkFBc0IsRUFBQztJQUNyRCxLQUFLLEVBQUUsSUFBSTtDQUNaO0FBUUQsTUFBTSxPQUFPLHNCQUFzQjs7Ozs7SUF5QmpDLFlBQVksT0FBbUIsRUFBVSxTQUFtQjtRQUFuQixjQUFTLEdBQVQsU0FBUyxDQUFVOztRQXRCbkQsVUFBSyxHQUFXLEVBQUUsQ0FBQyxDQUFFLGdDQUFnQzs7UUFDckQsU0FBSSxHQUFXLE1BQU0sQ0FBQyxDQUFDLDRCQUE0Qjs7UUFDbkQsYUFBUSxHQUFZLElBQUksQ0FBQyxDQUFDLHFCQUFxQjs7UUFDL0MsYUFBUSxHQUFZLEtBQUssQ0FBQyxDQUFDLHFCQUFxQjs7UUFDekQsV0FBTSxHQUFXLEVBQUUsQ0FBQyxDQUFDLG1DQUFtQzs7UUFDeEQsYUFBUSxHQUFXLEVBQUUsQ0FBQyxDQUFDLG9DQUFvQzs7UUFDM0QsWUFBTyxHQUFZLElBQUksQ0FBQyxDQUFDLDZCQUE2Qjs7UUFDdEQsYUFBUSxHQUFRLFFBQVEsQ0FBQyxTQUFTLENBQUMsQ0FBQyw4QkFBOEI7O1FBQ2xFLGNBQVMsR0FBUSxRQUFRLENBQUMsU0FBUyxDQUFDLENBQUMsNkJBQTZCO1FB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O0lBQ3RCLHlDQUF3Qjs7SUFDeEIsMENBQW1DOztJQUNuQywyQ0FBb0M7Ozs7O0lBY0gsMkNBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEVsZW1lbnRSZWYsIGZvcndhcmRSZWYsIElucHV0LCBPbkluaXQsIFJlbmRlcmVyLCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuY29uc3QgSU5MSU5FX0VESVRfQ09OVFJPTF9WQUxVRV9BQ0NFU1NPUiA9IHtcbiAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IExhYmVsRWRpdGFibGVDb21wb25lbnQpLFxuICBtdWx0aTogdHJ1ZVxufTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWxhYmVsLWVkaXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vbGFiZWwtZWRpdGFibGUuY29tcG9uZW50Lmh0bWwnLFxuICBwcm92aWRlcnM6IFtJTkxJTkVfRURJVF9DT05UUk9MX1ZBTFVFX0FDQ0VTU09SXSxcbiAgc3R5bGVVcmxzOiBbJy4vbGFiZWwtZWRpdGFibGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBMYWJlbEVkaXRhYmxlQ29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE9uSW5pdCB7XG5cbiAgQFZpZXdDaGlsZCgnbGFiZWxFZGl0Q29udHJvbCcsIHtzdGF0aWM6IGZhbHNlfSkgbGFiZWxFZGl0Q29udHJvbDogRWxlbWVudFJlZjsgLy8gaW5wdXQgRE9NIGVsZW1lbnRcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyA9ICcnOyAgLy8gTGFiZWwgdmFsdWUgZm9yIGlucHV0IGVsZW1lbnRcbiAgQElucHV0KCkgdHlwZTogc3RyaW5nID0gJ3RleHQnOyAvLyBUaGUgdHlwZSBvZiBpbnB1dCBlbGVtZW50XG4gIEBJbnB1dCgpIHJlcXVpcmVkOiBib29sZWFuID0gdHJ1ZTsgLy8gSXMgaW5wdXQgcmVxdXJpZWQ/XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7IC8vIElzIGlucHV0IGRpc2FibGVkP1xuICBfdmFsdWU6IHN0cmluZyA9ICcnOyAvLyBQcml2YXRlIHZhcmlhYmxlIGZvciBpbnB1dCB2YWx1ZVxuICBwcmVWYWx1ZTogc3RyaW5nID0gJyc7IC8vIFRoZSB2YWx1ZSBiZWZvcmUgY2xpY2tpbmcgdG8gZWRpdFxuICBlZGl0aW5nOiBib29sZWFuID0gdHJ1ZTsgLy8gSXMgQ29tcG9uZW50IGluIGVkaXQgbW9kZT9cbiAgb25DaGFuZ2U6IGFueSA9IEZ1bmN0aW9uLnByb3RvdHlwZTsgLy8gVHJhc2NlbmQgdGhlIG9uQ2hhbmdlIGV2ZW50XG4gIG9uVG91Y2hlZDogYW55ID0gRnVuY3Rpb24ucHJvdG90eXBlOyAvLyBUcmFzY2VuZCB0aGUgb25Ub3VjaCBldmVudFxuXG4gIC8vIENvbnRyb2wgVmFsdWUgQWNjZXNzb3JzIGZvciBuZ01vZGVsXG4gIGdldCB2YWx1ZSgpOiBhbnkge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuXG4gIHNldCB2YWx1ZSh2OiBhbnkpIHtcbiAgICBpZiAodiAhPT0gdGhpcy5fdmFsdWUpIHtcbiAgICAgIHRoaXMuX3ZhbHVlID0gdjtcbiAgICAgIHRoaXMub25DaGFuZ2Uodik7XG4gICAgfVxuICB9XG5cbiAgY29uc3RydWN0b3IoZWxlbWVudDogRWxlbWVudFJlZiwgcHJpdmF0ZSBfcmVuZGVyZXI6IFJlbmRlcmVyKSB7XG4gICAgdGhpcy5lZGl0aW5nID0gdHJ1ZTtcbiAgfVxuXG4gIC8vIFJlcXVpcmVkIGZvciBDb250cm9sVmFsdWVBY2Nlc3NvciBpbnRlcmZhY2VcbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgfVxuXG4gIC8vIFJlcXVpcmVkIGZvckNvbnRyb2xWYWx1ZUFjY2Vzc29yIGludGVyZmFjZVxuICBwdWJsaWMgcmVnaXN0ZXJPbkNoYW5nZShmbjogKF86IGFueSkgPT4ge30pOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICAvLyBSZXF1aXJlZCBmb3JDb250cm9sVmFsdWVBY2Nlc3NvciBpbnRlcmZhY2VcbiAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiAoKSA9PiB7fSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICAvLyBEbyBzdHVmZiB3aGVuIHRoZSBpbnB1dCBlbGVtZW50IGxvc2VzIGZvY3VzXG4gIG9uQmx1cigkZXZlbnQ6IEV2ZW50KSB7XG4gICAgaWYgKHRoaXMuX3ZhbHVlICE9PSAnJyAmJiB0aGlzLl92YWx1ZSkge1xuICAgICAgdGhpcy5lZGl0aW5nID0gZmFsc2U7XG4gICAgfVxuICB9XG5cbiAgb25DbG9zZSgkZXZlbnQ6IEV2ZW50KSB7XG4gICAgaWYgKHRoaXMuX3ZhbHVlICE9PSAnJyAmJiB0aGlzLl92YWx1ZSkge1xuICAgICAgdGhpcy5lZGl0aW5nID0gZmFsc2U7XG4gICAgfVxuXG4gIH1cblxuICAvLyBTdGFydCB0aGUgZWRpdHRpbmcgcHJvY2VzcyBmb3IgdGhlIGlucHV0IGVsZW1lbnRcbiAgZWRpdCh2YWx1ZSkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5wcmVWYWx1ZSA9IHZhbHVlO1xuICAgIHRoaXMuZWRpdGluZyA9IHRydWU7XG4gICAgLy8gRm9jdXMgb24gdGhlIGlucHV0IGVsZW1lbnQganVzdCBhcyB0aGUgZWRpdGluZyBiZWdpbnNcbiAgICBpZiAodGhpcy5sYWJlbEVkaXRDb250cm9sKSB7XG4gICAgICBzZXRUaW1lb3V0KF8gPT4gdGhpcy5fcmVuZGVyZXIuaW52b2tlRWxlbWVudE1ldGhvZCh0aGlzLmxhYmVsRWRpdENvbnRyb2wsXG4gICAgICAgICdmb2N1cycsIFtdKSk7XG4gICAgfVxuXG5cbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuX3JlbmRlcmVyLmxpc3Rlbignd2luZG93JywgJ2NsaWNrJywgKGU6IEV2ZW50KSA9PiB7XG4gICAgICBpZiAodGhpcy5sYWJlbEVkaXRDb250cm9sICYmIHRoaXMubGFiZWxFZGl0Q29udHJvbC5uYXRpdmVFbGVtZW50ICYmIGUudGFyZ2V0ICE9PSB0aGlzLmxhYmVsRWRpdENvbnRyb2wubmF0aXZlRWxlbWVudCkge1xuICAgICAgICBpZiAodGhpcy5fdmFsdWUgIT09ICcnICYmIHRoaXMuX3ZhbHVlKSB7XG4gICAgICAgICAgdGhpcy5lZGl0aW5nID0gZmFsc2U7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9KTtcbiAgICB0aGlzLmVkaXRpbmcgPSB0cnVlO1xuICB9XG59XG4iXX0=