UNPKG

mat-contenteditable

Version:

Angular contenteditable directive for Angular forms and Material Design

40 lines 4.7 kB
import { __decorate, __metadata } from "tslib"; import { Directive, Renderer2, ElementRef, AfterContentInit } from '@angular/core'; let FormFieldSizerDirective = class FormFieldSizerDirective { constructor(renderer, elementRef) { this.renderer = renderer; this.elementRef = elementRef; } ngAfterContentInit() { this.updateSize(); } updateSize() { const infix = this.getElement('mat-form-field-infix'); this.renderer.removeStyle(infix, 'min-height'); setTimeout(() => { const wrapper = this.getElement('mat-form-field-wrapper'); const offset = this.elementRef.nativeElement.offsetHeight - wrapper.offsetHeight - parseFloat(getComputedStyle(wrapper).marginTop) - parseFloat(getComputedStyle(wrapper).marginBottom) + parseFloat(getComputedStyle(infix).height); this.renderer.setStyle(infix, 'min-height', `${offset}px`); }); } getElement(name) { return this.elementRef.nativeElement.getElementsByClassName(name).item(0); } }; FormFieldSizerDirective.ctorParameters = () => [ { type: Renderer2 }, { type: ElementRef } ]; FormFieldSizerDirective = __decorate([ Directive({ selector: '[formFieldSizer]' }), __metadata("design:paramtypes", [Renderer2, ElementRef]) ], FormFieldSizerDirective); export { FormFieldSizerDirective }; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC1zaXplci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9tYXQtY29udGVudGVkaXRhYmxlLyIsInNvdXJjZXMiOlsibGliL2Zvcm0tZmllbGQtc2l6ZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFLbkYsSUFBYSx1QkFBdUIsR0FBcEMsTUFBYSx1QkFBdUI7SUFFbEMsWUFDbUIsUUFBbUIsRUFDbkIsVUFBc0I7UUFEdEIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUNuQixlQUFVLEdBQVYsVUFBVSxDQUFZO0lBQ3JDLENBQUM7SUFFTCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxVQUFVO1FBQ1IsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1FBQ3RELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLEtBQUssRUFBRSxZQUFZLENBQUMsQ0FBQztRQUUvQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO1lBQzFELE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFlBQVk7Z0JBQ3ZELE9BQU8sQ0FBQyxZQUFZO2dCQUNwQixVQUFVLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxDQUFDO2dCQUMvQyxVQUFVLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLENBQUMsWUFBWSxDQUFDO2dCQUNsRCxVQUFVLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUM7WUFFN0MsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLFlBQVksRUFBRSxHQUFHLE1BQU0sSUFBSSxDQUFDLENBQUM7UUFDN0QsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU8sVUFBVSxDQUFDLElBQVk7UUFDN0IsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDNUUsQ0FBQztDQUVGLENBQUE7O1lBNUI4QixTQUFTO1lBQ1AsVUFBVTs7QUFKOUIsdUJBQXVCO0lBSG5DLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxrQkFBa0I7S0FDN0IsQ0FBQztxQ0FJNkIsU0FBUztRQUNQLFVBQVU7R0FKOUIsdUJBQXVCLENBK0JuQztTQS9CWSx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIFJlbmRlcmVyMiwgRWxlbWVudFJlZiwgQWZ0ZXJDb250ZW50SW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbZm9ybUZpZWxkU2l6ZXJdJ1xufSlcbmV4cG9ydCBjbGFzcyBGb3JtRmllbGRTaXplckRpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcmVhZG9ubHkgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgICBwcml2YXRlIHJlYWRvbmx5IGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICkgeyB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgIHRoaXMudXBkYXRlU2l6ZSgpO1xuICB9XG5cbiAgdXBkYXRlU2l6ZSgpIHtcbiAgICBjb25zdCBpbmZpeCA9IHRoaXMuZ2V0RWxlbWVudCgnbWF0LWZvcm0tZmllbGQtaW5maXgnKTtcbiAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZVN0eWxlKGluZml4LCAnbWluLWhlaWdodCcpO1xuXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBjb25zdCB3cmFwcGVyID0gdGhpcy5nZXRFbGVtZW50KCdtYXQtZm9ybS1maWVsZC13cmFwcGVyJyk7XG4gICAgICBjb25zdCBvZmZzZXQgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5vZmZzZXRIZWlnaHQgLVxuICAgICAgICB3cmFwcGVyLm9mZnNldEhlaWdodCAtXG4gICAgICAgIHBhcnNlRmxvYXQoZ2V0Q29tcHV0ZWRTdHlsZSh3cmFwcGVyKS5tYXJnaW5Ub3ApIC1cbiAgICAgICAgcGFyc2VGbG9hdChnZXRDb21wdXRlZFN0eWxlKHdyYXBwZXIpLm1hcmdpbkJvdHRvbSkgK1xuICAgICAgICBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUoaW5maXgpLmhlaWdodCk7XG5cbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoaW5maXgsICdtaW4taGVpZ2h0JywgYCR7b2Zmc2V0fXB4YCk7XG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIGdldEVsZW1lbnQobmFtZTogc3RyaW5nKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKG5hbWUpLml0ZW0oMCk7XG4gIH1cblxufVxuIl19