mat-contenteditable
Version:
Angular contenteditable directive for Angular forms and Material Design
40 lines • 4.7 kB
JavaScript
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