wh-inline-editor/wh-inline-editor.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"WhInlineEditorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"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}"]}]}],"members":{"classList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"pipe":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"pipeArgs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"elementReference":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"nativeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"editEventType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"defaultText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"showEditButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"datepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"wrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["wrapper"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":15},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":32,"character":22}]}],null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":32,"character":82}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"clickEvent":[{"__symbolic":"method"}]}},"WhInlineEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"WhInlineEditorComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"WhInlineEditorComponent"}],"providers":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":19,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CurrencyPipe","line":20,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"AsyncPipe","line":21,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"LowerCasePipe","line":22,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"UpperCasePipe","line":23,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":24,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"JsonPipe","line":25,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"PercentPipe","line":26,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"TitleCasePipe","line":27,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"SlicePipe","line":28,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"KeyValuePipe","line":29,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"I18nPluralPipe","line":30,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"I18nSelectPipe","line":31,"character":4}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"dynamicPipe"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":7,"character":39}]}],"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":12,"character":4}],"exports":[{"__symbolic":"reference","module":"@angular/material","name":"MatInputModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatIconModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatSelectModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material","name":"MatDatepickerModule","line":18,"character":4}]}]}],"members":{}}},"origins":{"WhInlineEditorComponent":"./lib/wh-inline-editor.component","WhInlineEditorModule":"./lib/wh-inline-editor.module","ɵa":"./lib/dynamic.pipe","ɵb":"./lib/angular-material.module"},"importAs":"wh-inline-editor"}