wh-inline-editor
Version:
Simple wrapper that gives a visual upgrade helpful for form heavy applications or input heavy grids.
334 lines (321 loc) • 14 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material')) :
typeof define === 'function' && define.amd ? define('wh-inline-editor', ['exports', '@angular/core', '@angular/common', '@angular/material'], factory) :
(factory((global['wh-inline-editor'] = {}),global.ng.core,global.ng.common,global.ng.material));
}(this, (function (exports,core,common,material) { 'use strict';
/**
* @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: core.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: core.Inject, args: [common.DOCUMENT,] }] },
{ type: core.ChangeDetectorRef }
];
};
WhInlineEditorComponent.propDecorators = {
classList: [{ type: core.Input }],
pipe: [{ type: core.Input }],
pipeArgs: [{ type: core.Input }],
elementReference: [{ type: core.Input }],
matSelect: [{ type: core.Input }],
nativeSelect: [{ type: core.Input }],
model: [{ type: core.Input }],
editEventType: [{ type: core.Input }],
defaultText: [{ type: core.Input }],
showEditButton: [{ type: core.Input }],
datepicker: [{ type: core.Input }],
wrapper: [{ type: core.ViewChild, args: ['wrapper',] }]
};
return WhInlineEditorComponent;
}());
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @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: core.Pipe, args: [{
name: 'dynamicPipe'
},] }
];
/** @nocollapse */
DynamicPipe.ctorParameters = function () {
return [
{ type: core.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: core.NgModule, args: [{
declarations: [],
imports: [
common.CommonModule,
material.MatIconModule,
material.MatInputModule,
material.MatSelectModule,
material.MatDatepickerModule
],
exports: [
material.MatInputModule,
material.MatIconModule,
material.MatSelectModule,
material.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: core.NgModule, args: [{
declarations: [
WhInlineEditorComponent,
DynamicPipe,
],
imports: [
common.CommonModule,
AngularMaterialModule
],
exports: [
WhInlineEditorComponent
],
providers: [
common.DatePipe,
common.CurrencyPipe,
common.AsyncPipe,
common.LowerCasePipe,
common.UpperCasePipe,
common.DecimalPipe,
common.JsonPipe,
common.PercentPipe,
common.TitleCasePipe,
common.SlicePipe,
common.KeyValuePipe,
common.I18nPluralPipe,
common.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
*/
exports.WhInlineEditorComponent = WhInlineEditorComponent;
exports.WhInlineEditorModule = WhInlineEditorModule;
exports.ɵb = AngularMaterialModule;
exports.ɵa = DynamicPipe;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=wh-inline-editor.umd.js.map