wh-inline-editor
Version:
Simple wrapper that gives a visual upgrade helpful for form heavy applications or input heavy grids.
266 lines (258 loc) • 9.21 kB
JavaScript
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
*/
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',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class DynamicPipe {
/**
* @param {?} injector
*/
constructor(injector) {
this.injector = injector;
}
/**
* @param {?} value
* @param {?} pipeToken
* @param {?} pipeArgs
* @return {?}
*/
transform(value, pipeToken, pipeArgs) {
if (!pipeToken) {
return value;
}
/** @type {?} */
const pipe = this.injector.get(pipeToken);
return pipe.transform(value, ...pipeArgs);
}
}
DynamicPipe.decorators = [
{ type: Pipe, args: [{
name: 'dynamicPipe'
},] }
];
/** @nocollapse */
DynamicPipe.ctorParameters = () => [
{ type: Injector }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AngularMaterialModule {
}
AngularMaterialModule.decorators = [
{ type: NgModule, args: [{
declarations: [],
imports: [
CommonModule,
MatIconModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule
],
exports: [
MatInputModule,
MatIconModule,
MatSelectModule,
MatDatepickerModule
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class 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
]
},] }
];
/**
* @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