wh-inline-editor
Version:
Simple wrapper that gives a visual upgrade helpful for form heavy applications or input heavy grids.
286 lines (278 loc) • 10.4 kB
JavaScript
import { __spread } from 'tslib';
import { Component, Input, Inject, ChangeDetectorRef, ViewChild, Injector, Pipe, NgModule } from '@angular/core';
import { DOCUMENT, CommonModule, CurrencyPipe, DatePipe, AsyncPipe, LowerCasePipe, UpperCasePipe, DecimalPipe, JsonPipe, PercentPipe, TitleCasePipe, SlicePipe, KeyValuePipe, I18nPluralPipe, I18nSelectPipe } from '@angular/common';
import { MatInputModule, MatSelectModule, MatDatepickerModule, MatIconModule } from '@angular/material';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DynamicPipe = /** @class */ (function () {
function DynamicPipe(injector) {
this.injector = injector;
}
/**
* @param {?} value
* @param {?} pipeToken
* @param {?} pipeArgs
* @return {?}
*/
DynamicPipe.prototype.transform = /**
* @param {?} value
* @param {?} pipeToken
* @param {?} pipeArgs
* @return {?}
*/
function (value, pipeToken, pipeArgs) {
if (!pipeToken) {
return value;
}
/** @type {?} */
var pipe = this.injector.get(pipeToken);
return pipe.transform.apply(pipe, __spread([value], pipeArgs));
};
DynamicPipe.decorators = [
{ type: Pipe, args: [{
name: 'dynamicPipe'
},] }
];
/** @nocollapse */
DynamicPipe.ctorParameters = function () { return [
{ type: Injector }
]; };
return DynamicPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AngularMaterialModule = /** @class */ (function () {
function AngularMaterialModule() {
}
AngularMaterialModule.decorators = [
{ type: NgModule, args: [{
declarations: [],
imports: [
CommonModule,
MatIconModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule
],
exports: [
MatInputModule,
MatIconModule,
MatSelectModule,
MatDatepickerModule
]
},] }
];
return AngularMaterialModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var WhInlineEditorModule = /** @class */ (function () {
function WhInlineEditorModule() {
}
WhInlineEditorModule.decorators = [
{ type: NgModule, args: [{
declarations: [
WhInlineEditorComponent,
DynamicPipe,
],
imports: [
CommonModule,
AngularMaterialModule
],
exports: [
WhInlineEditorComponent
],
providers: [
DatePipe,
CurrencyPipe,
AsyncPipe,
LowerCasePipe,
UpperCasePipe,
DecimalPipe,
JsonPipe,
PercentPipe,
TitleCasePipe,
SlicePipe,
KeyValuePipe,
I18nPluralPipe,
I18nSelectPipe
]
},] }
];
return WhInlineEditorModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { WhInlineEditorComponent, WhInlineEditorModule, AngularMaterialModule as ɵb, DynamicPipe as ɵa };
//# sourceMappingURL=wh-inline-editor.js.map