UNPKG

wh-inline-editor

Version:

Simple wrapper that gives a visual upgrade helpful for form heavy applications or input heavy grids.

206 lines 15.7 kB
/** * @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'; var WhInlineEditorComponent = /** @class */ (function () { function WhInlineEditorComponent(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 {?} */ WhInlineEditorComponent.prototype.ngAfterContentInit = /** * @return {?} */ function () { var _this = this; if (this.datepicker) { this.datepicker.closedStream.subscribe((/** * @return {?} */ function () { _this.wrapper.nativeElement.querySelector('#' + _this.elementReference).focus(); })); } }; /** * @return {?} */ WhInlineEditorComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { var _this = this; if (this.matSelect) { this.matSelect.openedChange.subscribe((/** * @param {?} opened * @return {?} */ function (opened) { if (!opened) { _this.editing = false; } })); } document.querySelectorAll('.ng-content-container').forEach((/** * @param {?} element * @return {?} */ function (element) { element.querySelectorAll('input').forEach((/** * @param {?} innerElement * @return {?} */ function (innerElement) { innerElement.addEventListener('blur', (/** * @return {?} */ function () { if (_this.datepicker) { setTimeout((/** * @return {?} */ function () { if (!_this.datepicker.opened) { _this.editing = false; } }), 200); } else { _this.editing = false; } })); innerElement.addEventListener('focusout', (/** * @return {?} */ function () { if (_this.datepicker) { setTimeout((/** * @return {?} */ function () { if (!_this.datepicker.opened) { _this.editing = false; } }), 200); } else { _this.editing = false; } })); })); })); }; /** * @param {?} clickType * @return {?} */ WhInlineEditorComponent.prototype.clickEvent = /** * @param {?} clickType * @return {?} */ function (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 {?} */ var 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 = function () { return [ { 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',] }] }; return WhInlineEditorComponent; }()); export { WhInlineEditorComponent }; 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2gtaW5saW5lLWVkaXRvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly93aC1pbmxpbmUtZWRpdG9yLyIsInNvdXJjZXMiOlsibGliL3doLWlubGluZS1lZGl0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWlCLGlCQUFpQixFQUMxRCxVQUFVLEVBQUUsU0FBUyxFQUFrQyxNQUFNLGVBQWUsQ0FBQztBQUN0RixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUc3RDtJQTBCRSxpQ0FBc0MsUUFBYSxFQUFVLGlCQUFvQztRQUEzRCxhQUFRLEdBQVIsUUFBUSxDQUFLO1FBQVUsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQW5CakcsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixPQUFFLEdBQUcsdUJBQXVCLENBQUM7UUFDN0IsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVSLGNBQVMsR0FBYSxJQUFJLENBQUM7UUFHM0IscUJBQWdCLEdBQUcsRUFBRSxDQUFDO1FBSXRCLGtCQUFhLEdBQUcsT0FBTyxDQUFDO1FBQ3hCLGdCQUFXLEdBQUcsZUFBZSxDQUFDO1FBQzlCLG1CQUFjLEdBQUcsSUFBSSxDQUFDO0lBTXFFLENBQUM7Ozs7SUFFckcsb0RBQWtCOzs7SUFBbEI7UUFBQSxpQkFNQztRQUxDLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNuQixJQUFJLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxTQUFTOzs7WUFBQztnQkFDckMsS0FBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLEdBQUcsR0FBRyxLQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNoRixDQUFDLEVB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LDhCQUFDO0NBQUEsQUFwR0QsSUFvR0M7U0EvRlksdUJBQXVCOzs7SUFFbEMsMENBQWdCOztJQUNoQixxQ0FBNkI7O0lBQzdCLDJDQUFpQjs7SUFFakIsNENBQW9DOztJQUNwQyx1Q0FBbUI7O0lBQ25CLDJDQUFzQjs7SUFDdEIsbURBQStCOztJQUMvQiw0Q0FBOEI7O0lBQzlCLCtDQUF5Qzs7SUFDekMsd0NBQW9COztJQUNwQixnREFBaUM7O0lBQ2pDLDhDQUF1Qzs7SUFDdkMsaURBQStCOztJQUMvQiw2Q0FBeUM7O0lBR3pDLDBDQUEwQzs7Ozs7SUFFOUIsMkNBQXVDOzs7OztJQUFFLG9EQUE0QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIEluamVjdCwgQWZ0ZXJWaWV3SW5pdCwgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgICAgICBFbGVtZW50UmVmLCBWaWV3Q2hpbGQsIEFmdGVyQ29udGVudEluaXQsIENvbnRlbnRDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRE9DVU1FTlQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTWF0RGF0ZXBpY2tlciwgTWF0U2VsZWN0IH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwnO1xuaW1wb3J0IHsgRHluYW1pY1BpcGUgfSBmcm9tICcuL2R5bmFtaWMucGlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3doLWlubGluZS1lZGl0b3InLFxuICB0ZW1wbGF0ZVVybDogJy4vd2gtaW5saW5lLWVkaXRvci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3doLWlubGluZS1lZGl0b3IuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIFdoSW5saW5lRWRpdG9yQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgQWZ0ZXJDb250ZW50SW5pdCB7XG5cbiAgZWRpdGluZyA9IGZhbHNlO1xuICBpZCA9ICdpbmxpbmVFZGl0b3JDb21wb25lbnQnO1xuICBob3ZlcmluZyA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpIGNsYXNzTGlzdDogc3RyaW5nW10gPSBudWxsO1xuICBASW5wdXQoKSBwaXBlOiBhbnk7XG4gIEBJbnB1dCgpIHBpcGVBcmdzOiBbXTtcbiAgQElucHV0KCkgZWxlbWVudFJlZmVyZW5jZSA9ICcnO1xuICBASW5wdXQoKSBtYXRTZWxlY3Q6IE1hdFNlbGVjdDtcbiAgQElucHV0KCkgbmF0aXZlU2VsZWN0OiBIVE1MU2VsZWN0RWxlbWVudDtcbiAgQElucHV0KCkgbW9kZWw6IGFueTtcbiAgQElucHV0KCkgZWRpdEV2ZW50VHlwZSA9ICdjbGljayc7XG4gIEBJbnB1dCgpIGRlZmF1bHRUZXh0ID0gJ0VudGVyIGEgdmFsdWUnO1xuICBASW5wdXQoKSBzaG93RWRpdEJ1dHRvbiA9IHRydWU7XG4gIEBJbnB1dCgpIGRhdGVwaWNrZXI6IE1hdERhdGVwaWNrZXI8RGF0ZT47XG5cblxuICBAVmlld0NoaWxkKCd3cmFwcGVyJykgd3JhcHBlcjogRWxlbWVudFJlZjtcblxuICBjb25zdHJ1Y3RvcihASW5qZWN0KERPQ1VNRU5UKSBwcml2YXRlIGRvY3VtZW50OiBhbnksIHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICBpZiAodGhpcy5kYXRlcGlja2VyKSB7XG4gICAgICB0aGlzLmRhdGVwaWNrZXIuY2xvc2VkU3RyZWFtLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIHRoaXMud3JhcHBlci5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJyMnICsgdGhpcy5lbGVtZW50UmVmZXJlbmNlKS5mb2N1cygpO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIGlmICh0aGlzLm1hdFNlbGVjdCkge1xuICAgICAgdGhpcy5tYXRTZWxlY3Qub3BlbmVkQ2hhbmdlLnN1YnNjcmliZShvcGVuZWQgPT4ge1xuICAgICAgICBpZiAoIW9wZW5lZCkge1xuICAgICAgICAgIHRoaXMuZWRpdGluZyA9IGZhbHNlO1xuICAgICAgICB9XG4gICAgICB9KTtcbiAgICB9XG5cbiAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcubmctY29udGVudC1jb250YWluZXInKS5mb3JFYWNoKChlbGVtZW50OiBFbGVtZW50KSA9PiB7XG5cbiAgICAgIGVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgnaW5wdXQnKS5mb3JFYWNoKChpbm5lckVsZW1lbnQ6IEVsZW1lbnQpID0+IHtcbiAgICAgICAgaW5uZXJFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2JsdXInLCAoKSA9PiB7XG4gICAgICAgICAgaWYgKHRoaXMuZGF0ZXBpY2tlcikge1xuICAgICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKCF0aGlzLmRhdGVwaWNrZXIub3BlbmVkKSB7XG4gICAgICAgICAgICAgICAgICB0aGlzLmVkaXRpbmcgPSBmYWxzZTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH0sIDIwMCk7XG4gICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMuZWRpdGluZyA9IGZhbHNlO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG5cbiAgICAgICAgaW5uZXJFbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2ZvY3Vzb3V0JywgKCkgPT4ge1xuICAgICAgICAgIGlmICh0aGlzLmRhdGVwaWNrZXIpIHtcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgIGlmICghdGhpcy5kYXRlcGlja2VyLm9wZW5lZCkge1xuICAgICAgICAgICAgICAgICAgdGhpcy5lZGl0aW5nID0gZmFsc2U7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICB9LCAyMDApO1xuICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmVkaXRpbmcgPSBmYWxzZTtcbiAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgICAgfSk7XG4gICAgfSk7XG4gIH1cblxuICBjbGlja0V2ZW50KGNsaWNrVHlwZTogc3RyaW5nKSB7XG4gICAgaWYgKHRoaXMuZWRpdEV2ZW50VHlwZSA9PT0gY2xpY2tUeXBlKSB7XG4gICAgICB0aGlzLmVkaXRpbmcgPSB0cnVlO1xuXG4gICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcblxuICAgICAgaWYgKHRoaXMubWF0U2VsZWN0KSB7XG4gICAgICAgIHRoaXMubWF0U2VsZWN0Lm9wZW4oKTtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAodGhpcy53cmFwcGVyKSB7XG4gICAgICAgIGlmICh0aGlzLmRhdGVwaWNrZXIpIHtcbiAgICAgICAgICB0aGlzLmRhdGVwaWNrZXIub3BlbigpO1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IGVsZW1lbnRUb0ZvY3VzID0gdGhpcy53cmFwcGVyLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignIycgKyB0aGlzLmVsZW1lbnRSZWZlcmVuY2UpO1xuXG4gICAgICAgIGlmIChlbGVtZW50VG9Gb2N1cykge1xuICAgICAgICAgIGVsZW1lbnRUb0ZvY3VzLmZvY3VzKCk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiJdfQ==