wh-inline-editor
Version:
Simple wrapper that gives a visual upgrade helpful for form heavy applications or input heavy grids.
196 lines • 15.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Inject, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { MatDatepicker, MatSelect } from '@angular/material';
export class WhInlineEditorComponent {
/**
* @param {?} document
* @param {?} changeDetectorRef
*/
constructor(document, changeDetectorRef) {
this.document = document;
this.changeDetectorRef = changeDetectorRef;
this.editing = false;
this.id = 'inlineEditorComponent';
this.hovering = false;
this.classList = null;
this.elementReference = '';
this.editEventType = 'click';
this.defaultText = 'Enter a value';
this.showEditButton = true;
}
/**
* @return {?}
*/
ngAfterContentInit() {
if (this.datepicker) {
this.datepicker.closedStream.subscribe((/**
* @return {?}
*/
() => {
this.wrapper.nativeElement.querySelector('#' + this.elementReference).focus();
}));
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (this.matSelect) {
this.matSelect.openedChange.subscribe((/**
* @param {?} opened
* @return {?}
*/
opened => {
if (!opened) {
this.editing = false;
}
}));
}
document.querySelectorAll('.ng-content-container').forEach((/**
* @param {?} element
* @return {?}
*/
(element) => {
element.querySelectorAll('input').forEach((/**
* @param {?} innerElement
* @return {?}
*/
(innerElement) => {
innerElement.addEventListener('blur', (/**
* @return {?}
*/
() => {
if (this.datepicker) {
setTimeout((/**
* @return {?}
*/
() => {
if (!this.datepicker.opened) {
this.editing = false;
}
}), 200);
}
else {
this.editing = false;
}
}));
innerElement.addEventListener('focusout', (/**
* @return {?}
*/
() => {
if (this.datepicker) {
setTimeout((/**
* @return {?}
*/
() => {
if (!this.datepicker.opened) {
this.editing = false;
}
}), 200);
}
else {
this.editing = false;
}
}));
}));
}));
}
/**
* @param {?} clickType
* @return {?}
*/
clickEvent(clickType) {
if (this.editEventType === clickType) {
this.editing = true;
this.changeDetectorRef.detectChanges();
if (this.matSelect) {
this.matSelect.open();
return;
}
if (this.wrapper) {
if (this.datepicker) {
this.datepicker.open();
return;
}
/** @type {?} */
const elementToFocus = this.wrapper.nativeElement.querySelector('#' + this.elementReference);
if (elementToFocus) {
elementToFocus.focus();
}
}
}
}
}
WhInlineEditorComponent.decorators = [
{ type: Component, args: [{
selector: 'wh-inline-editor',
template: "<span *ngIf=\"!editing\" (click)=\"clickEvent('click')\" (dblclick)=\"clickEvent('doubleClick')\" [ngClass]=\"classList || ['mat-form-field', 'inline-label']\">\r\n {{ pipe && model ? (model | dynamicPipe: pipe:pipeArgs) : model || defaultText }}\r\n <mat-icon *ngIf=\"showEditButton && !editing\" matSuffix (click)=\"clickEvent(editEventType)\">mode_edit</mat-icon>\r\n</span>\r\n<span [hidden]=\"!editing\" class=\"ng-content-container\" (keyup.enter)=\"editing = false;\" #wrapper contenteditable=\"true\">\r\n <ng-content></ng-content>\r\n</span>\r\n",
styles: [".inline-label{padding:8px;cursor:pointer}.ng-content-container{padding:8px}.inline-label:hover{background-color:#eee}mat-icon{cursor:pointer}"]
}] }
];
/** @nocollapse */
WhInlineEditorComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: ChangeDetectorRef }
];
WhInlineEditorComponent.propDecorators = {
classList: [{ type: Input }],
pipe: [{ type: Input }],
pipeArgs: [{ type: Input }],
elementReference: [{ type: Input }],
matSelect: [{ type: Input }],
nativeSelect: [{ type: Input }],
model: [{ type: Input }],
editEventType: [{ type: Input }],
defaultText: [{ type: Input }],
showEditButton: [{ type: Input }],
datepicker: [{ type: Input }],
wrapper: [{ type: ViewChild, args: ['wrapper',] }]
};
if (false) {
/** @type {?} */
WhInlineEditorComponent.prototype.editing;
/** @type {?} */
WhInlineEditorComponent.prototype.id;
/** @type {?} */
WhInlineEditorComponent.prototype.hovering;
/** @type {?} */
WhInlineEditorComponent.prototype.classList;
/** @type {?} */
WhInlineEditorComponent.prototype.pipe;
/** @type {?} */
WhInlineEditorComponent.prototype.pipeArgs;
/** @type {?} */
WhInlineEditorComponent.prototype.elementReference;
/** @type {?} */
WhInlineEditorComponent.prototype.matSelect;
/** @type {?} */
WhInlineEditorComponent.prototype.nativeSelect;
/** @type {?} */
WhInlineEditorComponent.prototype.model;
/** @type {?} */
WhInlineEditorComponent.prototype.editEventType;
/** @type {?} */
WhInlineEditorComponent.prototype.defaultText;
/** @type {?} */
WhInlineEditorComponent.prototype.showEditButton;
/** @type {?} */
WhInlineEditorComponent.prototype.datepicker;
/** @type {?} */
WhInlineEditorComponent.prototype.wrapper;
/**
* @type {?}
* @private
*/
WhInlineEditorComponent.prototype.document;
/**
* @type {?}
* @private
*/
WhInlineEditorComponent.prototype.changeDetectorRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2gtaW5saW5lLWVkaXRvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly93aC1pbmxpbmUtZWRpdG9yLyIsInNvdXJjZXMiOlsibGliL3doLWlubGluZS1lZGl0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWlCLGlCQUFpQixFQUMxRCxVQUFVLEVBQUUsU0FBUyxFQUFrQyxNQUFNLGVBQWUsQ0FBQztBQUN0RixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQVE3RCxNQUFNLE9BQU8sdUJBQXVCOzs7OztJQXFCbEMsWUFBc0MsUUFBYSxFQUFVLGlCQUFvQztRQUEzRCxhQUFRLEdBQVIsUUFBUSxDQUFLO1FBQVUsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQW5CakcsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixPQUFFLEdBQUcsdUJBQXVCLENBQUM7UUFDN0IsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVSLGNBQVMsR0FBYSxJQUFJLENBQUM7UUFHM0IscUJBQWdCLEdBQUcsRUFBRSxDQUFDO1FBSXRCLGtCQUFhLEdBQUcsT0FBTyxDQUFDO1FBQ3hCLGdCQUFXLEdBQUcsZUFBZSxDQUFDO1FBQzlCLG1CQUFjLEdBQUcsSUFBSSxDQUFDO0lBTXFFLENBQUM7Ozs7SUFFckcsa0JBQWtCO1FBQ2hCLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNuQixJQUFJLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxTQUFTOzs7WUFBQyxHQUFHLEVBQUU7Z0JBQzFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7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TCxLQUFLO3lCQUNMLEtBQUs7c0JBR0wsU0FBUyxTQUFDLFNBQVM7Ozs7SUFqQnBCLDBDQUFnQjs7SUFDaEIscUNBQTZCOztJQUM3QiwyQ0FBaUI7O0lBRWpCLDRDQUFvQzs7SUFDcEMsdUNBQW1COztJQUNuQiwyQ0FBc0I7O0lBQ3RCLG1EQUErQjs7SUFDL0IsNENBQThCOztJQUM5QiwrQ0FBeUM7O0lBQ3pDLHdDQUFvQjs7SUFDcEIsZ0RBQWlDOztJQUNqQyw4Q0FBdUM7O0lBQ3ZDLGlEQUErQjs7SUFDL0IsNkNBQXlDOztJQUd6QywwQ0FBMEM7Ozs7O0lBRTlCLDJDQUF1Qzs7Ozs7SUFBRSxvREFBNEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBJbmplY3QsIEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdG9yUmVmLFxuICAgICAgICAgRWxlbWVudFJlZiwgVmlld0NoaWxkLCBBZnRlckNvbnRlbnRJbml0LCBDb250ZW50Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERPQ1VNRU5UIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE1hdERhdGVwaWNrZXIsIE1hdFNlbGVjdCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsJztcbmltcG9ydCB7IER5bmFtaWNQaXBlIH0gZnJvbSAnLi9keW5hbWljLnBpcGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd3aC1pbmxpbmUtZWRpdG9yJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3doLWlubGluZS1lZGl0b3IuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi93aC1pbmxpbmUtZWRpdG9yLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBXaElubGluZUVkaXRvckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIEFmdGVyQ29udGVudEluaXQge1xuXG4gIGVkaXRpbmcgPSBmYWxzZTtcbiAgaWQgPSAnaW5saW5lRWRpdG9yQ29tcG9uZW50JztcbiAgaG92ZXJpbmcgPSBmYWxzZTtcblxuICBASW5wdXQoKSBjbGFzc0xpc3Q6IHN0cmluZ1tdID0gbnVsbDtcbiAgQElucHV0KCkgcGlwZTogYW55O1xuICBASW5wdXQoKSBwaXBlQXJnczogW107XG4gIEBJbnB1dCgpIGVsZW1lbnRSZWZlcmVuY2UgPSAnJztcbiAgQElucHV0KCkgbWF0U2VsZWN0OiBNYXRTZWxlY3Q7XG4gIEBJbnB1dCgpIG5hdGl2ZVNlbGVjdDogSFRNTFNlbGVjdEVsZW1lbnQ7XG4gIEBJbnB1dCgpIG1vZGVsOiBhbnk7XG4gIEBJbnB1dCgpIGVkaXRFdmVudFR5cGUgPSAnY2xpY2snO1xuICBASW5wdXQoKSBkZWZhdWx0VGV4dCA9ICdFbnRlciBhIHZhbHVlJztcbiAgQElucHV0KCkgc2hvd0VkaXRCdXR0b24gPSB0cnVlO1xuICBASW5wdXQoKSBkYXRlcGlja2VyOiBNYXREYXRlcGlja2VyPERhdGU+O1xuXG5cbiAgQFZpZXdDaGlsZCgnd3JhcHBlcicpIHdyYXBwZXI6IEVsZW1lbnRSZWY7XG5cbiAgY29uc3RydWN0b3IoQEluamVjdChET0NVTUVOVCkgcHJpdmF0ZSBkb2N1bWVudDogYW55LCBwcml2YXRlIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgaWYgKHRoaXMuZGF0ZXBpY2tlcikge1xuICAgICAgdGhpcy5kYXRlcGlja2VyLmNsb3NlZFN0cmVhbS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICB0aGlzLndyYXBwZXIubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCcjJyArIHRoaXMuZWxlbWVudFJlZmVyZW5jZSkuZm9jdXMoKTtcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBpZiAodGhpcy5tYXRTZWxlY3QpIHtcbiAgICAgIHRoaXMubWF0U2VsZWN0Lm9wZW5lZENoYW5nZS5zdWJzY3JpYmUob3BlbmVkID0+IHtcbiAgICAgICAgaWYgKCFvcGVuZWQpIHtcbiAgICAgICAgICB0aGlzLmVkaXRpbmcgPSBmYWxzZTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuXG4gICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLm5nLWNvbnRlbnQtY29udGFpbmVyJykuZm9yRWFjaCgoZWxlbWVudDogRWxlbWVudCkgPT4ge1xuXG4gICAgICBlbGVtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJ2lucHV0JykuZm9yRWFjaCgoaW5uZXJFbGVtZW50OiBFbGVtZW50KSA9PiB7XG4gICAgICAgIGlubmVyRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgKCkgPT4ge1xuICAgICAgICAgIGlmICh0aGlzLmRhdGVwaWNrZXIpIHtcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgIGlmICghdGhpcy5kYXRlcGlja2VyLm9wZW5lZCkge1xuICAgICAgICAgICAgICAgICAgdGhpcy5lZGl0aW5nID0gZmFsc2U7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICB9LCAyMDApO1xuICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmVkaXRpbmcgPSBmYWxzZTtcbiAgICAgICAgICB9XG4gICAgICAgIH0pO1xuXG4gICAgICAgIGlubmVyRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdmb2N1c291dCcsICgpID0+IHtcbiAgICAgICAgICBpZiAodGhpcy5kYXRlcGlja2VyKSB7XG4gICAgICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgICAgICBpZiAoIXRoaXMuZGF0ZXBpY2tlci5vcGVuZWQpIHtcbiAgICAgICAgICAgICAgICAgIHRoaXMuZWRpdGluZyA9IGZhbHNlO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgfSwgMjAwKTtcbiAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5lZGl0aW5nID0gZmFsc2U7XG4gICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgY2xpY2tFdmVudChjbGlja1R5cGU6IHN0cmluZykge1xuICAgIGlmICh0aGlzLmVkaXRFdmVudFR5cGUgPT09IGNsaWNrVHlwZSkge1xuICAgICAgdGhpcy5lZGl0aW5nID0gdHJ1ZTtcblxuICAgICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG5cbiAgICAgIGlmICh0aGlzLm1hdFNlbGVjdCkge1xuICAgICAgICB0aGlzLm1hdFNlbGVjdC5vcGVuKCk7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgaWYgKHRoaXMud3JhcHBlcikge1xuICAgICAgICBpZiAodGhpcy5kYXRlcGlja2VyKSB7XG4gICAgICAgICAgdGhpcy5kYXRlcGlja2VyLm9wZW4oKTtcbiAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCBlbGVtZW50VG9Gb2N1cyA9IHRoaXMud3JhcHBlci5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJyMnICsgdGhpcy5lbGVtZW50UmVmZXJlbmNlKTtcblxuICAgICAgICBpZiAoZWxlbWVudFRvRm9jdXMpIHtcbiAgICAgICAgICBlbGVtZW50VG9Gb2N1cy5mb2N1cygpO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0=