@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
45 lines • 6.68 kB
JavaScript
import { Directive, ElementRef, HostListener, inject, Renderer2 } from '@angular/core';
import * as i0 from "@angular/core";
export class AutoGrowDirective {
constructor() {
this._elementRef = inject(ElementRef);
this._renderer = inject(Renderer2);
// ensure this is a textarea or else throw error
if (this._elementRef.nativeElement.tagName.toLowerCase() !== 'textarea') {
throw new Error('uxAutoGrow directive can only be used on <textarea> elements.');
}
}
ngAfterViewInit() {
this.update();
}
update() {
// perform sizing
this._renderer.setStyle(this._elementRef.nativeElement, 'overflowY', 'hidden');
this._renderer.setStyle(this._elementRef.nativeElement, 'height', 'auto');
// get the new total height and element height
const { scrollHeight } = this._elementRef.nativeElement;
const { maxHeight } = getComputedStyle(this._elementRef.nativeElement);
// determine what the maximum allowed height is
const maximum = !isNaN(parseFloat(maxHeight)) ? parseFloat(maxHeight) : Infinity;
// if there is a max height specifed we want to show the scrollbars
if (maximum < scrollHeight) {
this._renderer.setStyle(this._elementRef.nativeElement, 'overflowY', 'auto');
this._renderer.setStyle(this._elementRef.nativeElement, 'height', maximum + 'px');
}
else {
this._renderer.setStyle(this._elementRef.nativeElement, 'height', scrollHeight + 'px');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AutoGrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: AutoGrowDirective, selector: "[uxAutoGrow]", host: { listeners: { "input": "update()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AutoGrowDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxAutoGrow]'
}]
}], ctorParameters: () => [], propDecorators: { update: [{
type: HostListener,
args: ['input']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0by1ncm93LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9kaXJlY3RpdmVzL2F1dG8tZ3Jvdy9hdXRvLWdyb3cuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFLdEcsTUFBTSxPQUFPLGlCQUFpQjtJQUs1QjtRQUppQixnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVqQyxjQUFTLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBRzdDLGdEQUFnRDtRQUNoRCxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxXQUFXLEVBQUUsS0FBSyxVQUFVLEVBQUUsQ0FBQztZQUN4RSxNQUFNLElBQUksS0FBSyxDQUFDLCtEQUErRCxDQUFDLENBQUM7UUFDbkYsQ0FBQztJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFHRCxNQUFNO1FBRUosaUJBQWlCO1FBQ2pCLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLFdBQVcsRUFBRSxRQUFRLENBQUMsQ0FBQztRQUMvRSxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxRQUFRLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFFMUUsOENBQThDO1FBQzlDLE1BQU0sRUFBRSxZQUFZLEVBQUUsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQztRQUN4RCxNQUFNLEVBQUUsU0FBUyxFQUFFLEdBQUcsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUV2RSwrQ0FBK0M7UUFDL0MsTUFBTSxPQUFPLEdBQUcsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO1FBRWpGLG1FQUFtRTtRQUNuRSxJQUFJLE9BQU8sR0FBRyxZQUFZLEVBQUUsQ0FBQztZQUMzQixJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsRUFBRSxXQUFXLEVBQUUsTUFBTSxDQUFDLENBQUM7WUFDN0UsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLEVBQUUsUUFBUSxFQUFFLE9BQU8sR0FBRyxJQUFJLENBQUMsQ0FBQztRQUNwRixDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLFFBQVEsRUFBRSxZQUFZLEdBQUcsSUFBSSxDQUFDLENBQUM7UUFDekYsQ0FBQztJQUNILENBQUM7K0dBckNVLGlCQUFpQjttR0FBakIsaUJBQWlCOzs0RkFBakIsaUJBQWlCO2tCQUg3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO2lCQUN6Qjt3REFrQkMsTUFBTTtzQkFETCxZQUFZO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciwgaW5qZWN0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3V4QXV0b0dyb3ddJ1xufSlcbmV4cG9ydCBjbGFzcyBBdXRvR3Jvd0RpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBwcml2YXRlIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgX3JlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgLy8gZW5zdXJlIHRoaXMgaXMgYSB0ZXh0YXJlYSBvciBlbHNlIHRocm93IGVycm9yXG4gICAgaWYgKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC50YWdOYW1lLnRvTG93ZXJDYXNlKCkgIT09ICd0ZXh0YXJlYScpIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcigndXhBdXRvR3JvdyBkaXJlY3RpdmUgY2FuIG9ubHkgYmUgdXNlZCBvbiA8dGV4dGFyZWE+IGVsZW1lbnRzLicpO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnVwZGF0ZSgpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignaW5wdXQnKVxuICB1cGRhdGUoKTogdm9pZCB7XG5cbiAgICAvLyBwZXJmb3JtIHNpemluZ1xuICAgIHRoaXMuX3JlbmRlcmVyLnNldFN0eWxlKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93WScsICdoaWRkZW4nKTtcbiAgICB0aGlzLl9yZW5kZXJlci5zZXRTdHlsZSh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdoZWlnaHQnLCAnYXV0bycpO1xuXG4gICAgLy8gZ2V0IHRoZSBuZXcgdG90YWwgaGVpZ2h0IGFuZCBlbGVtZW50IGhlaWdodFxuICAgIGNvbnN0IHsgc2Nyb2xsSGVpZ2h0IH0gPSB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgY29uc3QgeyBtYXhIZWlnaHQgfSA9IGdldENvbXB1dGVkU3R5bGUodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcblxuICAgIC8vIGRldGVybWluZSB3aGF0IHRoZSBtYXhpbXVtIGFsbG93ZWQgaGVpZ2h0IGlzXG4gICAgY29uc3QgbWF4aW11bSA9ICFpc05hTihwYXJzZUZsb2F0KG1heEhlaWdodCkpID8gcGFyc2VGbG9hdChtYXhIZWlnaHQpIDogSW5maW5pdHk7XG5cbiAgICAvLyBpZiB0aGVyZSBpcyBhIG1heCBoZWlnaHQgc3BlY2lmZWQgd2Ugd2FudCB0byBzaG93IHRoZSBzY3JvbGxiYXJzXG4gICAgaWYgKG1heGltdW0gPCBzY3JvbGxIZWlnaHQpIHtcbiAgICAgIHRoaXMuX3JlbmRlcmVyLnNldFN0eWxlKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93WScsICdhdXRvJyk7XG4gICAgICB0aGlzLl9yZW5kZXJlci5zZXRTdHlsZSh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdoZWlnaHQnLCBtYXhpbXVtICsgJ3B4Jyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuX3JlbmRlcmVyLnNldFN0eWxlKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ2hlaWdodCcsIHNjcm9sbEhlaWdodCArICdweCcpO1xuICAgIH1cbiAgfVxuXG59Il19