wh-inline-editor/bundles/wh-inline-editor.umd.min.js

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

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/material")):"function"==typeof define&&define.amd?define("wh-inline-editor",["exports","@angular/core","@angular/common","@angular/material"],t):t(e["wh-inline-editor"]={},e.ng.core,e.ng.common,e.ng.material)}(this,function(e,t,n,i){"use strict";var r=(o.prototype.ngAfterContentInit=function(){var e=this;this.datepicker&&this.datepicker.closedStream.subscribe(function(){e.wrapper.nativeElement.querySelector("#"+e.elementReference).focus()})},o.prototype.ngAfterViewInit=function(){var t=this;this.matSelect&&this.matSelect.openedChange.subscribe(function(e){e||(t.editing=!1)}),document.querySelectorAll(".ng-content-container").forEach(function(e){e.querySelectorAll("input").forEach(function(e){e.addEventListener("blur",function(){t.datepicker?setTimeout(function(){t.datepicker.opened||(t.editing=!1)},200):t.editing=!1}),e.addEventListener("focusout",function(){t.datepicker?setTimeout(function(){t.datepicker.opened||(t.editing=!1)},200):t.editing=!1})})})},o.prototype.clickEvent=function(e){if(this.editEventType===e){if(this.editing=!0,this.changeDetectorRef.detectChanges(),this.matSelect)return void this.matSelect.open();if(this.wrapper){if(this.datepicker)return void this.datepicker.open();var t=this.wrapper.nativeElement.querySelector("#"+this.elementReference);t&&t.focus()}}},o.decorators=[{type:t.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}"]}]}],o.ctorParameters=function(){return[{type:undefined,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]},{type:t.ChangeDetectorRef}]},o.propDecorators={classList:[{type:t.Input}],pipe:[{type:t.Input}],pipeArgs:[{type:t.Input}],elementReference:[{type:t.Input}],matSelect:[{type:t.Input}],nativeSelect:[{type:t.Input}],model:[{type:t.Input}],editEventType:[{type:t.Input}],defaultText:[{type:t.Input}],showEditButton:[{type:t.Input}],datepicker:[{type:t.Input}],wrapper:[{type:t.ViewChild,args:["wrapper"]}]},o);function o(e,t){this.document=e,this.changeDetectorRef=t,this.editing=!1,this.id="inlineEditorComponent",this.hovering=!1,this.classList=null,this.elementReference="",this.editEventType="click",this.defaultText="Enter a value",this.showEditButton=!0}function a(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,o=n.call(e),a=[];try{for(;(void 0===t||0<t--)&&!(i=o.next()).done;)a.push(i.value)}catch(c){r={error:c}}finally{try{i&&!i.done&&(n=o["return"])&&n.call(o)}finally{if(r)throw r.error}}return a}var c=(p.prototype.transform=function(e,t,n){if(!t)return e;var i=this.injector.get(t);return i.transform.apply(i,function r(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(a(arguments[t]));return e}([e],n))},p.decorators=[{type:t.Pipe,args:[{name:"dynamicPipe"}]}],p.ctorParameters=function(){return[{type:t.Injector}]},p);function p(e){this.injector=e}var l=(u.decorators=[{type:t.NgModule,args:[{declarations:[],imports:[n.CommonModule,i.MatIconModule,i.MatInputModule,i.MatSelectModule,i.MatDatepickerModule],exports:[i.MatInputModule,i.MatIconModule,i.MatSelectModule,i.MatDatepickerModule]}]}],u);function u(){}var d=(s.decorators=[{type:t.NgModule,args:[{declarations:[r,c],imports:[n.CommonModule,l],exports:[r],providers:[n.DatePipe,n.CurrencyPipe,n.AsyncPipe,n.LowerCasePipe,n.UpperCasePipe,n.DecimalPipe,n.JsonPipe,n.PercentPipe,n.TitleCasePipe,n.SlicePipe,n.KeyValuePipe,n.I18nPluralPipe,n.I18nSelectPipe]}]}],s);function s(){}e.WhInlineEditorComponent=r,e.WhInlineEditorModule=d,e.ɵb=l,e.ɵa=c,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=wh-inline-editor.umd.min.js.map