├── .editorconfig ├── .gitignore ├── .nvmrc ├── LICENSE ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── projects ├── ngx-autosize-demo │ ├── karma.conf.js │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ ├── bg │ │ │ │ └── bg-header.jpg │ │ │ ├── favicon.ico │ │ │ ├── favicon.svg │ │ │ └── logo │ │ │ │ ├── logo-invert.ico │ │ │ │ ├── logo-invert.png │ │ │ │ ├── logo.png │ │ │ │ └── logo.svg │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ └── test.ts │ ├── tsconfig.app.json │ └── tsconfig.spec.json └── ngx-autosize │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── autosize.directive.ts │ │ ├── autosize.module.ts │ │ └── window-ref.service.ts │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /.ng_pkg_build 8 | .angular 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # IDEs and editors 14 | /.idea 15 | .project 16 | .classpath 17 | .c9/ 18 | *.launch 19 | .settings/ 20 | *.sublime-workspace 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.17.0 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Chrystian Ruminowicz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/ngx-autosize.svg)](https://badge.fury.io/js/ngx-autosize) 2 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) 3 | [![](https://data.jsdelivr.com/v1/package/npm/ngx-autosize/badge?style=rounded)](https://www.jsdelivr.com/package/npm/ngx-autosize) 4 | # ngx-autosize 5 | 6 | ***ngx-autosize*** is an Angular2+ directive that automatically adjusts textarea height to fit its content. 7 | 8 | It adjusts the textarea height automatically to any text input, or changes to the model bound to the textarea. 9 | - Production builds ready (AOT support) 10 | - Works with [Ionic](http://ionicframework.com/) (shadow dom of v4 too) 11 | 12 | Check the demo [here](https://chrum.it/pages/ngx-autosize) 13 | 14 | ## Installation: 15 | **angular 12+** 16 | ```bash 17 | npm install ngx-autosize 18 | ``` 19 | 20 | **for angular <12** 21 | ```bash 22 | npm install ngx-autosize@1 23 | ``` 24 | 25 | ## Use Example: 26 | 27 | Add the declaration to your @NgModule: 28 | **IMPORTANT !!!** you need to do it for every module that will be autosizing textareas ;) 29 | ```typescript 30 | import {AutosizeModule} from 'ngx-autosize'; 31 | 32 | ... 33 | 34 | @NgModule({ 35 | imports: [ 36 | AutosizeModule 37 | ] 38 | }) 39 | ``` 40 | 41 | 42 | 43 | Use directly inside your HTML templates 44 | 45 | ``` 46 | 49 | ``` 50 | ``` 51 | 52 | And this is Ionic2 example 53 | 54 | ``` 55 | ## Dynamically enable directive 56 | ``` 57 | // Enabled (defalut) 58 | // Disabled 59 | ``` 60 | ## Settings 61 | Name | Default | Type | Description 62 | --- | --- | --- | --- 63 | minRows | | integer | Sets minimal amount of rows of the textarea 64 | maxRows | | integer | Sets maximum rows count after which autosizing if turned off and scrollbar appears 65 | onlyGrow | false | boolean | Controls if autosize should make the textarea smaller. In other words... should empty lines be trimmed? 66 | useImportant | false | boolean | Controls if autosize should include `!important` in its height css styles. Should only need to be used if the height of the textarea is being overridden elsewhere 67 | 68 | Example 69 | ``` 70 | 73 | ``` 74 | ## Events / Outputs 75 | Name | Description 76 | --- | --- 77 | resized | Called whenever textarea has changes its size. New height as a param. 78 | 79 | Example 80 | ``` 81 | 84 | ``` 85 | 86 | ## Origins 87 | This small lib is based on great 88 | [http://stevepapa.com/angular2-autosize](http://stevepapa.com/angular2-autosize) 89 | which is unfortunatelly not maintained and abandoned :( 90 | 91 | ## Authors 92 | 93 | [Steve Papa](https://stevepapa.com) 94 | [Chrystian Ruminowicz](http://chrum.it) 95 | 96 | ## Licence 97 | 98 | This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info. 99 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "cli": { 4 | "analytics": false 5 | }, 6 | "version": 1, 7 | "newProjectRoot": "projects", 8 | "projects": { 9 | "ngx-autosize": { 10 | "projectType": "library", 11 | "root": "projects/ngx-autosize", 12 | "sourceRoot": "projects/ngx-autosize/src", 13 | "prefix": "lib", 14 | "architect": { 15 | "build": { 16 | "builder": "@angular-devkit/build-angular:ng-packagr", 17 | "options": { 18 | "project": "projects/ngx-autosize/ng-package.json" 19 | }, 20 | "configurations": { 21 | "production": { 22 | "tsConfig": "projects/ngx-autosize/tsconfig.lib.prod.json" 23 | }, 24 | "development": { 25 | "tsConfig": "projects/ngx-autosize/tsconfig.lib.json" 26 | } 27 | }, 28 | "defaultConfiguration": "production" 29 | }, 30 | "test": { 31 | "builder": "@angular-devkit/build-angular:karma", 32 | "options": { 33 | "main": "projects/ngx-autosize/src/test.ts", 34 | "tsConfig": "projects/ngx-autosize/tsconfig.spec.json", 35 | "karmaConfig": "projects/ngx-autosize/karma.conf.js" 36 | } 37 | } 38 | } 39 | }, 40 | "ngx-autosize-demo": { 41 | "projectType": "application", 42 | "schematics": { 43 | "@schematics/angular:component": { 44 | "style": "scss" 45 | }, 46 | "@schematics/angular:application": { 47 | "strict": true 48 | } 49 | }, 50 | "root": "projects/ngx-autosize-demo", 51 | "sourceRoot": "projects/ngx-autosize-demo/src", 52 | "prefix": "app", 53 | "architect": { 54 | "build": { 55 | "builder": "@angular-devkit/build-angular:application", 56 | "options": { 57 | "outputPath": { 58 | "base": "dist/ngx-autosize-demo" 59 | }, 60 | "index": "projects/ngx-autosize-demo/src/index.html", 61 | "polyfills": [ 62 | "projects/ngx-autosize-demo/src/polyfills.ts" 63 | ], 64 | "tsConfig": "projects/ngx-autosize-demo/tsconfig.app.json", 65 | "inlineStyleLanguage": "scss", 66 | "assets": [ 67 | "projects/ngx-autosize-demo/src/favicon.ico", 68 | "projects/ngx-autosize-demo/src/assets" 69 | ], 70 | "styles": [ 71 | "projects/ngx-autosize-demo/src/styles.scss" 72 | ], 73 | "scripts": [], 74 | "browser": "projects/ngx-autosize-demo/src/main.ts" 75 | }, 76 | "configurations": { 77 | "production": { 78 | "budgets": [ 79 | { 80 | "type": "initial", 81 | "maximumWarning": "500kb", 82 | "maximumError": "1mb" 83 | }, 84 | { 85 | "type": "anyComponentStyle", 86 | "maximumWarning": "2kb", 87 | "maximumError": "4kb" 88 | } 89 | ], 90 | "fileReplacements": [ 91 | { 92 | "replace": "projects/ngx-autosize-demo/src/environments/environment.ts", 93 | "with": "projects/ngx-autosize-demo/src/environments/environment.prod.ts" 94 | } 95 | ], 96 | "outputHashing": "all" 97 | }, 98 | "development": { 99 | "optimization": false, 100 | "extractLicenses": false, 101 | "sourceMap": true, 102 | "namedChunks": true 103 | } 104 | }, 105 | "defaultConfiguration": "production" 106 | }, 107 | "serve": { 108 | "builder": "@angular-devkit/build-angular:dev-server", 109 | "configurations": { 110 | "production": { 111 | "buildTarget": "ngx-autosize-demo:build:production" 112 | }, 113 | "development": { 114 | "buildTarget": "ngx-autosize-demo:build:development" 115 | } 116 | }, 117 | "defaultConfiguration": "development" 118 | }, 119 | "extract-i18n": { 120 | "builder": "@angular-devkit/build-angular:extract-i18n", 121 | "options": { 122 | "buildTarget": "ngx-autosize-demo:build" 123 | } 124 | }, 125 | "test": { 126 | "builder": "@angular-devkit/build-angular:karma", 127 | "options": { 128 | "main": "projects/ngx-autosize-demo/src/test.ts", 129 | "polyfills": "projects/ngx-autosize-demo/src/polyfills.ts", 130 | "tsConfig": "projects/ngx-autosize-demo/tsconfig.spec.json", 131 | "karmaConfig": "projects/ngx-autosize-demo/karma.conf.js", 132 | "inlineStyleLanguage": "scss", 133 | "assets": [ 134 | "projects/ngx-autosize-demo/src/favicon.ico", 135 | "projects/ngx-autosize-demo/src/assets" 136 | ], 137 | "styles": [ 138 | "projects/ngx-autosize-demo/src/styles.scss" 139 | ], 140 | "scripts": [] 141 | } 142 | } 143 | } 144 | } 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-autosize-app", 3 | "version": "2.0.4", 4 | "homepage": "https://chrum.it/pages/ngx-autosize", 5 | "description": "Directive that automatically adjusts textarea height to fit content", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/chrum/ngx-autosize" 9 | }, 10 | "keywords": [ 11 | "ng", 12 | "ng2", 13 | "angular", 14 | "angular2", 15 | "autosize", 16 | "textarea", 17 | "elastic", 18 | "height", 19 | "@angular", 20 | "ionic", 21 | "ionic4" 22 | ], 23 | "author": { 24 | "name": "Chrystian Ruminowicz", 25 | "email": "chrystianr@gmail.com" 26 | }, 27 | "scripts": { 28 | "ng": "ng", 29 | "start": "ng serve", 30 | "build": "ng build", 31 | "build:lib": "ng build ngx-autosize", 32 | "watch": "ng build --watch --configuration development", 33 | "test": "ng test" 34 | }, 35 | "private": true, 36 | "dependencies": { 37 | "@angular/animations": "^18.2.0", 38 | "@angular/cdk": "^18.2.0", 39 | "@angular/common": "^18.2.0", 40 | "@angular/compiler": "^18.2.0", 41 | "@angular/core": "^18.2.0", 42 | "@angular/forms": "^18.2.0", 43 | "@angular/platform-browser": "^18.2.0", 44 | "@angular/platform-browser-dynamic": "^18.2.0", 45 | "@angular/router": "^18.2.0", 46 | "http-server": "^14.1.0", 47 | "ngx-autosize": "file:dist/autosize", 48 | "rxjs": "~7.5.0", 49 | "tslib": "^2.3.0", 50 | "zone.js": "~0.14.10" 51 | }, 52 | "devDependencies": { 53 | "@angular-devkit/build-angular": "^18.2.0", 54 | "@angular/cli": "^18.2.0", 55 | "@angular/compiler-cli": "^18.2.0", 56 | "@types/jasmine": "~3.10.0", 57 | "@types/node": "^12.11.1", 58 | "jasmine-core": "~4.0.0", 59 | "karma": "~6.3.0", 60 | "karma-chrome-launcher": "~3.1.0", 61 | "karma-coverage": "~2.1.0", 62 | "karma-jasmine": "~4.0.0", 63 | "karma-jasmine-html-reporter": "~1.7.0", 64 | "ng-packagr": "^18.2.0", 65 | "typescript": "~5.4.5" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/ngx-autosize-demo'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |

Regular textarea 6 | 7 |

8 | 11 |
12 | 13 |
14 | 15 |
16 |

Dynamic directive -

20 | 24 | 25 | 28 | 29 |
30 | 31 |
32 | 33 |
34 |

Min rows

35 | 36 |
37 | 38 |
39 | 40 |
41 |

Max rows

42 | 46 |
47 | 48 |
49 | 50 |
51 |

Only growing

52 | 60 |
61 | 62 |
63 | 64 |
65 |

66 |

Use '!important'

67 | 68 |
69 | 75 |
76 |
77 | 78 |
79 | 80 |
81 |

[ formControl ] 82 | 83 |

84 | 85 |
86 | 87 |
88 |

89 | [ formGroup ] 90 | 91 |

92 |
93 | 94 |
95 |
96 | 97 |
98 | 99 |
100 |

Top and bottom borders 15px of width

101 | 106 |
107 | 108 |
109 | 110 |
111 |

Top and bottom padding 15px of width

112 | 116 |
117 | 118 |
119 | 120 |
121 |

Inside of a table with width 100%

122 | 123 | 124 | 125 | 131 | 132 |
First column 126 | 130 |
133 |
134 | 135 |
136 | 137 |
138 |

Arbitrary content reseting 139 |

140 | 143 |
144 | 145 |
146 | 147 |
148 |

Window width dependent textarea

149 |

Try to resize the window... all text should be always visible

150 | 152 |
153 | 154 |
155 | 156 |
157 |

Destroyed ng-container

158 |
159 |

No autosizing textarea here... that is because textarea was placed in ng-container that was immediately destroyed.

160 |

Eventough autosize was still initializing itself when container was destroyed... there should be no error in the console

161 |
162 | 163 | 164 | 165 |
166 | 167 |
168 | 169 |
170 |

Drag & Drop :)

171 | 172 |
173 |

To do

174 | 175 |
182 | 185 |
186 |
187 | 188 |
189 |

Done

190 | 191 |
198 | 201 |
202 |
203 |
204 | 205 |
206 | 207 | 208 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | table { 2 | margin: 0 auto; 3 | } 4 | 5 | .resize-with-window { 6 | textarea { 7 | width: 80%; 8 | } 9 | } 10 | 11 | textarea { 12 | min-width: 450px; 13 | 14 | &.forceImportant { 15 | height: auto !important 16 | } 17 | 18 | &.top-and-bottom-borders { 19 | border-top-width:15px; 20 | border-bottom-width:15px 21 | } 22 | 23 | &.top-and-bottom-padding { 24 | padding-top: 15px; 25 | padding-bottom: 15px; 26 | } 27 | } 28 | 29 | 30 | .drag-and-drop-container { 31 | width: 200px; 32 | max-width: 100%; 33 | margin: 0 25px 25px 0; 34 | display: inline-block; 35 | vertical-align: top; 36 | } 37 | 38 | .drag-and-drop-list { 39 | border: solid 1px #ccc; 40 | min-height: 60px; 41 | background: white; 42 | border-radius: 4px; 43 | overflow: hidden; 44 | display: block; 45 | } 46 | 47 | .drag-and-drop-box { 48 | margin: 3px; 49 | border-bottom: solid 1px #ccc; 50 | color: rgba(0, 0, 0, 0.87); 51 | /* display: flex; */ 52 | /* flex-direction: row; */ 53 | /* align-items: center; */ 54 | /* justify-content: space-between; */ 55 | /* box-sizing: border-box; */ 56 | cursor: move; 57 | background: white; 58 | /* font-size: 14px; */ 59 | width: 189px; 60 | min-width: auto; 61 | } 62 | 63 | .cdk-drag-preview { 64 | box-sizing: border-box; 65 | border-radius: 4px; 66 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 67 | 0 8px 10px 1px rgba(0, 0, 0, 0.14), 68 | 0 3px 14px 2px rgba(0, 0, 0, 0.12); 69 | } 70 | 71 | .cdk-drag-placeholder { 72 | opacity: 0; 73 | } 74 | 75 | .cdk-drag-animating { 76 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); 77 | } 78 | 79 | .drag-and-drop-box:last-child { 80 | border: none; 81 | } 82 | 83 | .drag-and-drop-list.cdk-drop-list-dragging .drag-and-drop-box:not(.cdk-drag-placeholder) { 84 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); 85 | } 86 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | }); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'ngx-autosize-demo'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('ngx-autosize-demo'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement as HTMLElement; 29 | expect(compiled.querySelector('.content span')?.textContent).toContain('ngx-autosize-demo app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit} from '@angular/core'; 2 | import {UntypedFormControl, UntypedFormGroup} from "@angular/forms"; 3 | import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; 4 | 5 | const longText = `Mega Man X, known in Japan as Rockman X,[a] is an action-platform video game developed and published by Capcom for the Super Nintendo Entertainment System (SNES). 6 | 1 7 | 2 8 | 3`; 9 | const resetExplanation = `In this text area we want to test if text after some manual changes can be restored to its original value and if textarea keeps autosizing... 10 | 11 | 12 | so just change this text, add some lines... 13 | and in the end hit the 'RESET' button above. 14 | 15 | Text area should come back to its original form :) 16 | `; 17 | 18 | @Component({ 19 | selector: 'app-root', 20 | templateUrl: './app.component.html', 21 | styleUrls: ['./app.component.scss'] 22 | }) 23 | export class AppComponent implements OnInit { 24 | public longText = longText; 25 | public resetableContent = resetExplanation; 26 | public minRows = 1; 27 | public maxRows = 4; 28 | public onlyGrow = true; 29 | public useImportant = true; 30 | public dynamic: 'enabled' | 'disabled' = 'enabled'; 31 | 32 | public showAreaInContainer = true; 33 | 34 | public todo = [ 35 | 'Get to work', 36 | 'Go home', 37 | ]; 38 | 39 | public done = [ 40 | 'Get up', 41 | ]; 42 | 43 | reactiveText = new UntypedFormControl(longText); 44 | reactiveForm = new UntypedFormGroup({ 45 | reactiveText: new UntypedFormControl(longText) 46 | }); 47 | 48 | ngOnInit(): void { 49 | setTimeout(() => { this.showAreaInContainer = false;}); 50 | } 51 | 52 | changeNgModel() { 53 | this.longText += "\n next"; 54 | } 55 | 56 | updateReactiveText() { 57 | const current = this.reactiveText.value; 58 | this.reactiveText.setValue(current + "\n next"); 59 | } 60 | 61 | updateReactiveFormText() { 62 | const current = this.reactiveForm.value.reactiveText; 63 | this.reactiveForm.setValue({ 64 | reactiveText: current + "\n next" 65 | }); 66 | } 67 | 68 | resetArbitraryExample() { 69 | this.resetableContent = resetExplanation; 70 | } 71 | 72 | onResized(newHeight: number) { 73 | console.log(newHeight); 74 | } 75 | 76 | 77 | 78 | drop(event: CdkDragDrop) { 79 | if (event.previousContainer === event.container) { 80 | moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); 81 | } else { 82 | transferArrayItem( 83 | event.previousContainer.data, 84 | event.container.data, 85 | event.previousIndex, 86 | event.currentIndex 87 | ); 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import {BrowserModule} from '@angular/platform-browser'; 2 | import {NgModule} from '@angular/core'; 3 | 4 | import {AppComponent} from './app.component'; 5 | import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 6 | import {AutosizeModule} from 'ngx-autosize'; 7 | // import {AutosizeModule} from '../../../ngx-autosize/src/lib/autosize.module'; 8 | import {DragDropModule} from '@angular/cdk/drag-drop'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | AppComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | FormsModule, 17 | ReactiveFormsModule, 18 | AutosizeModule, 19 | DragDropModule 20 | ], 21 | providers: [], 22 | bootstrap: [AppComponent] 23 | }) 24 | export class AppModule { 25 | } 26 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/assets/bg/bg-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrum/ngx-autosize/e58c47af0a83da413ca5beb809e7fff2b5eb56c5/projects/ngx-autosize-demo/src/assets/bg/bg-header.jpg -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrum/ngx-autosize/e58c47af0a83da413ca5beb809e7fff2b5eb56c5/projects/ngx-autosize-demo/src/assets/favicon.ico -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/assets/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | 10 | 24 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/assets/logo/logo-invert.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrum/ngx-autosize/e58c47af0a83da413ca5beb809e7fff2b5eb56c5/projects/ngx-autosize-demo/src/assets/logo/logo-invert.ico -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/assets/logo/logo-invert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrum/ngx-autosize/e58c47af0a83da413ca5beb809e7fff2b5eb56c5/projects/ngx-autosize-demo/src/assets/logo/logo-invert.png -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/assets/logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrum/ngx-autosize/e58c47af0a83da413ca5beb809e7fff2b5eb56c5/projects/ngx-autosize-demo/src/assets/logo/logo.png -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/assets/logo/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | 10 | 24 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrum/ngx-autosize/e58c47af0a83da413ca5beb809e7fff2b5eb56c5/projects/ngx-autosize-demo/src/favicon.ico -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ngx-Autosize 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 99 | 100 | 101 | 102 | 103 | 104 |
105 |
106 | 107 | 108 | 109 | 110 |
111 |
112 |

113 | ngx-autosize 114 |

115 |
116 |
117 | 118 | 119 | Fork me on GitHub 121 | 122 | 123 |
124 |
125 | 126 |
127 |
128 |
129 |
130 |

ngx-autosize

131 |

132 | is an Angular2+ directive that automatically adjusts textarea height to fit its content. 133 |

134 | 135 | 136 |
137 |
138 |
139 |
140 | 141 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | 51 | /*************************************************************************************************** 52 | * APPLICATION IMPORTS 53 | */ 54 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | // First, initialize the Angular testing environment. 11 | getTestBed().initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting(), 14 | ); 15 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/ngx-autosize-demo/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/ngx-autosize/README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/ngx-autosize.svg)](https://badge.fury.io/js/ngx-autosize) 2 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) 3 | [![](https://data.jsdelivr.com/v1/package/npm/ngx-autosize/badge?style=rounded)](https://www.jsdelivr.com/package/npm/ngx-autosize) 4 | # ngx-autosize 5 | 6 | ***ngx-autosize*** is an Angular2+ directive that automatically adjusts textarea height to fit its content. 7 | 8 | It adjusts the textarea height automatically to any text input, or changes to the model bound to the textarea. 9 | - Production builds ready (AOT support) 10 | - Works with [Ionic](http://ionicframework.com/) (shadow dom of v4 too) 11 | 12 | Check the demo [here](https://chrum.it/pages/ngx-autosize) 13 | 14 | ## Installation: 15 | **angular 12+** 16 | ```bash 17 | npm install ngx-autosize 18 | ``` 19 | 20 | **for angular <12** 21 | ```bash 22 | npm install ngx-autosize@1 23 | ``` 24 | 25 | ## Use Example: 26 | 27 | Add the declaration to your @NgModule: 28 | **IMPORTANT !!!** you need to do it for every module that will be autosizing textareas ;) 29 | ```typescript 30 | import {AutosizeModule} from 'ngx-autosize'; 31 | 32 | ... 33 | 34 | @NgModule({ 35 | imports: [ 36 | AutosizeModule 37 | ] 38 | }) 39 | ``` 40 | 41 | 42 | 43 | Use directly inside your HTML templates 44 | 45 | ``` 46 | 49 | ``` 50 | ``` 51 | 52 | And this is Ionic2 example 53 | 54 | ``` 55 | ## Dynamically enable directive 56 | ``` 57 | // Enabled (defalut) 58 | // Disabled 59 | ``` 60 | ## Settings 61 | Name | Default | Type | Description 62 | --- | --- | --- | --- 63 | minRows | | integer | Sets minimal amount of rows of the textarea 64 | maxRows | | integer | Sets maximum rows count after which autosizing if turned off and scrollbar appears 65 | onlyGrow | false | boolean | Controls if autosize should make the textarea smaller. In other words... should empty lines be trimmed? 66 | useImportant | false | boolean | Controls if autosize should include `!important` in its height css styles. Should only need to be used if the height of the textarea is being overridden elsewhere 67 | 68 | Example 69 | ``` 70 | 73 | ``` 74 | ## Events / Outputs 75 | Name | Description 76 | --- | --- 77 | resized | Called whenever textarea has changes its size. New height as a param. 78 | 79 | Example 80 | ``` 81 | 84 | ``` 85 | 86 | ## Origins 87 | This small lib is based on great 88 | [http://stevepapa.com/angular2-autosize](http://stevepapa.com/angular2-autosize) 89 | which is unfortunatelly not maintained and abandoned :( 90 | 91 | ## Authors 92 | 93 | [Steve Papa](https://stevepapa.com) 94 | [Chrystian Ruminowicz](http://chrum.it) 95 | 96 | ## Licence 97 | 98 | This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info. 99 | -------------------------------------------------------------------------------- /projects/ngx-autosize/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/ngx-autosize'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /projects/ngx-autosize/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-autosize", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/ngx-autosize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-autosize", 3 | "version": "2.0.4", 4 | "homepage": "https://chrum.it/pages/ngx-autosize", 5 | "description": "Directive that automatically adjusts textarea height to fit content", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/chrum/ngx-autosize" 9 | }, 10 | "keywords": [ 11 | "ng", 12 | "ng2", 13 | "angular", 14 | "angular2", 15 | "autosize", 16 | "textarea", 17 | "elastic", 18 | "height", 19 | "@angular", 20 | "ionic", 21 | "ionic4" 22 | ], 23 | "author": { 24 | "name": "Chrystian Ruminowicz", 25 | "email": "chrystianr@gmail.com" 26 | }, 27 | "license": "MIT", 28 | "peerDependencies": { 29 | "@angular/common": ">12.0.0", 30 | "@angular/core": ">12.0.0" 31 | }, 32 | "dependencies": { 33 | "tslib": ">2.0.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /projects/ngx-autosize/src/lib/autosize.directive.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ElementRef, 3 | HostListener, 4 | Directive, 5 | Input, 6 | NgZone, OnDestroy, OnChanges, AfterContentChecked, Output, EventEmitter, SimpleChanges 7 | } from '@angular/core'; 8 | import {WindowRef} from './window-ref.service'; 9 | 10 | const MAX_LOOKUP_RETRIES = 3; 11 | 12 | @Directive({ 13 | selector: '[autosize]' 14 | }) 15 | 16 | export class AutosizeDirective implements OnDestroy, OnChanges, AfterContentChecked { 17 | @Input() 18 | set minRows(value: number) { 19 | this._minRows = +value; 20 | if (this.textAreaEl) { 21 | this.textAreaEl.rows = this._minRows; 22 | } 23 | }; 24 | @Input('autosize') 25 | set _autosize(autosize: boolean | string) { 26 | this.autosize = typeof autosize === 'boolean' 27 | ? autosize 28 | : true; 29 | }; 30 | private _minRows!: number; 31 | 32 | @Input() maxRows!: number; 33 | @Input() onlyGrow = false; 34 | @Input() useImportant = false; 35 | 36 | @Output() resized = new EventEmitter(); 37 | 38 | private autosize = true; 39 | private retries = 0; 40 | private textAreaEl: any; 41 | 42 | private _oldContent!: string; 43 | private _oldWidth!: number; 44 | 45 | private _windowResizeHandler!: (...args: Array) => any; 46 | private _destroyed = false; 47 | 48 | @HostListener('input', ['$event.target']) 49 | onInput(textArea: HTMLTextAreaElement): void { 50 | this.adjust(); 51 | } 52 | 53 | constructor( 54 | public element: ElementRef, 55 | private _window: WindowRef, 56 | private _zone: NgZone 57 | ) { 58 | if (this.element.nativeElement.tagName !== 'TEXTAREA') { 59 | this._findNestedTextArea(); 60 | 61 | } else { 62 | this.textAreaEl = this.element.nativeElement; 63 | this.textAreaEl.style['overflow-y'] = 'hidden'; 64 | this._onTextAreaFound(); 65 | } 66 | } 67 | 68 | ngOnDestroy() { 69 | this._destroyed = true; 70 | if (this._windowResizeHandler) { 71 | this._window.nativeWindow.removeEventListener('resize', this._windowResizeHandler, false); 72 | } 73 | } 74 | 75 | ngAfterContentChecked() { 76 | this.adjust(); 77 | } 78 | 79 | ngOnChanges(changes: SimpleChanges) { 80 | this.adjust(true); 81 | } 82 | 83 | _findNestedTextArea() { 84 | this.textAreaEl = this.element.nativeElement.querySelector('TEXTAREA'); 85 | 86 | if (!this.textAreaEl && this.element.nativeElement.shadowRoot) { 87 | this.textAreaEl = this.element.nativeElement.shadowRoot.querySelector('TEXTAREA'); 88 | } 89 | 90 | if (!this.textAreaEl) { 91 | if (this.retries >= MAX_LOOKUP_RETRIES) { 92 | console.warn('ngx-autosize: textarea not found'); 93 | 94 | } else { 95 | this.retries++; 96 | setTimeout(() => { 97 | this._findNestedTextArea(); 98 | }, 100); 99 | } 100 | return; 101 | } 102 | 103 | this.textAreaEl.style['overflow-y'] = 'hidden'; 104 | this._onTextAreaFound(); 105 | 106 | } 107 | 108 | _onTextAreaFound() { 109 | this._addWindowResizeHandler(); 110 | setTimeout(() => { 111 | this.adjust(); 112 | }); 113 | } 114 | 115 | _addWindowResizeHandler() { 116 | this._windowResizeHandler = debounce(() => { 117 | this._zone.run(() => { 118 | this.adjust(); 119 | }); 120 | }, 200); 121 | 122 | this._zone.runOutsideAngular(() => { 123 | this._window.nativeWindow.addEventListener('resize', this._windowResizeHandler, false); 124 | }); 125 | } 126 | 127 | adjust(inputsChanged = false): void { 128 | if (this.autosize && !this._destroyed && this.textAreaEl && this.textAreaEl.parentNode) { 129 | 130 | const currentText = this.textAreaEl.value; 131 | 132 | if ( 133 | inputsChanged === false && 134 | currentText === this._oldContent && 135 | this.textAreaEl.offsetWidth === this._oldWidth 136 | ) { 137 | return; 138 | } 139 | 140 | this._oldContent = currentText; 141 | this._oldWidth = this.textAreaEl.offsetWidth; 142 | 143 | const clone = this.textAreaEl.cloneNode(true); 144 | const parent = this.textAreaEl.parentNode; 145 | clone.style.width = this.textAreaEl.offsetWidth + 'px'; 146 | clone.style.visibility = 'hidden'; 147 | clone.style.position = 'absolute'; 148 | clone.textContent = currentText; 149 | 150 | parent.appendChild(clone); 151 | 152 | clone.style['overflow-y'] = 'hidden'; 153 | clone.style.height = 'auto'; 154 | 155 | let height = clone.scrollHeight; 156 | 157 | // add into height top and bottom borders' width 158 | let computedStyle = this._window.nativeWindow.getComputedStyle(clone, null); 159 | height += parseInt(computedStyle.getPropertyValue('border-top-width')); 160 | height += parseInt(computedStyle.getPropertyValue('border-bottom-width')); 161 | 162 | if (computedStyle.getPropertyValue('box-sizing') === 'content-box') { 163 | height -= parseInt(computedStyle.getPropertyValue('padding-top')); 164 | height -= parseInt(computedStyle.getPropertyValue('padding-bottom')); 165 | } 166 | 167 | const oldHeight = this.textAreaEl.offsetHeight; 168 | const willGrow = height > oldHeight; 169 | 170 | if (this.onlyGrow === false || willGrow) { 171 | const lineHeight = this._getLineHeight(); 172 | const rowsCount = height / lineHeight; 173 | 174 | if (this._minRows && this._minRows >= rowsCount) { 175 | height = this._minRows * lineHeight; 176 | 177 | } else if (this.maxRows && this.maxRows <= rowsCount) { 178 | // never shrink the textarea if onlyGrow is true 179 | const maxHeight = this.maxRows * lineHeight; 180 | height = this.onlyGrow ? Math.max(maxHeight, oldHeight): maxHeight; 181 | this.textAreaEl.style['overflow-y'] = 'auto'; 182 | 183 | } else { 184 | this.textAreaEl.style['overflow-y'] = 'hidden'; 185 | } 186 | 187 | const heightStyle = height + 'px'; 188 | const important = this.useImportant ? 'important' : ''; 189 | 190 | this.textAreaEl.style.setProperty('height', heightStyle, important); 191 | 192 | this.resized.emit(height); 193 | } 194 | 195 | parent.removeChild(clone); 196 | } 197 | } 198 | 199 | private _getLineHeight() { 200 | let lineHeight = parseInt(this.textAreaEl.style.lineHeight, 10); 201 | if (isNaN(lineHeight) && this._window.nativeWindow.getComputedStyle) { 202 | const styles = this._window.nativeWindow.getComputedStyle(this.textAreaEl); 203 | lineHeight = parseInt(styles.lineHeight, 10); 204 | } 205 | 206 | if (isNaN(lineHeight)) { 207 | const fontSize = this._window.nativeWindow.getComputedStyle(this.textAreaEl, null).getPropertyValue('font-size'); 208 | lineHeight = Math.floor(parseInt(fontSize.replace('px', ''), 10) * 1.5); 209 | } 210 | 211 | return lineHeight; 212 | } 213 | } 214 | 215 | function debounce>(func: (...args: Params) => any, timeout: number): (...args: Params) => void { 216 | let timer: number; 217 | return (...args: Params) => { 218 | clearTimeout(timer) 219 | timer = setTimeout(() => { 220 | func(...args) 221 | }, timeout) 222 | } 223 | } 224 | 225 | // function Debounce(func: any, wait: number, immediate = false) { 226 | // let timeout: number | undefined; 227 | // return () => { 228 | // const context = this; 229 | // const args = arguments; 230 | // const later = function () { 231 | // timeout = undefined; 232 | // if (!immediate) { 233 | // func.apply(this, args); 234 | // } 235 | // }; 236 | // const callNow = immediate && !timeout; 237 | // clearTimeout(timeout); 238 | // timeout = setTimeout(later, wait); 239 | // if (callNow) { 240 | // func.apply(this, args); 241 | // } 242 | // }; 243 | // } 244 | -------------------------------------------------------------------------------- /projects/ngx-autosize/src/lib/autosize.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {AutosizeDirective} from './autosize.directive'; 3 | import {WindowRef} from './window-ref.service'; 4 | 5 | @NgModule({ 6 | declarations: [AutosizeDirective], 7 | imports: [], 8 | providers: [ 9 | WindowRef 10 | ], 11 | exports: [AutosizeDirective] 12 | }) 13 | export class AutosizeModule { 14 | } 15 | -------------------------------------------------------------------------------- /projects/ngx-autosize/src/lib/window-ref.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class WindowRef { 5 | get nativeWindow(): any { 6 | return window; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /projects/ngx-autosize/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-autosize 3 | */ 4 | 5 | export * from './lib/autosize.directive'; 6 | export * from './lib/autosize.module'; 7 | export * from './lib/window-ref.service'; 8 | -------------------------------------------------------------------------------- /projects/ngx-autosize/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting(), 15 | ); 16 | -------------------------------------------------------------------------------- /projects/ngx-autosize/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "src/test.ts", 13 | "**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /projects/ngx-autosize/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/ngx-autosize/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "esModuleInterop": true, 9 | "strict": true, 10 | "noImplicitOverride": true, 11 | "noPropertyAccessFromIndexSignature": true, 12 | "noImplicitReturns": true, 13 | "noFallthroughCasesInSwitch": true, 14 | "sourceMap": true, 15 | "paths": { 16 | "ngx-autosize": [ 17 | "dist/ngx-autosize/ngx-autosize", 18 | "dist/ngx-autosize" 19 | ] 20 | }, 21 | "declaration": false, 22 | "experimentalDecorators": true, 23 | "moduleResolution": "node", 24 | "importHelpers": true, 25 | "target": "ES2022", 26 | "module": "es2020", 27 | "lib": [ 28 | "es2020", 29 | "dom" 30 | ], 31 | "useDefineForClassFields": false 32 | }, 33 | "angularCompilerOptions": { 34 | "enableI18nLegacyMessageIdFormat": false, 35 | "strictInjectionParameters": true, 36 | "strictInputAccessModifiers": true, 37 | "strictTemplates": true 38 | } 39 | } 40 | --------------------------------------------------------------------------------