ci: add bidirectional sync with Forgejo

* fix peerDependencies to handle angular >=18
* build(package.json): upgrade angular 18
* refactor(lib): removed renderer2 not used
* docs(readme): add table installation dependencies

.github/workflows/mirror-to-forgejo.yml

@@ -0,0 +1,21 @@
+name: Mirror to Forgejo
+
+on:
+  push:
+    branches: ["**"]
+    tags: ["**"]
+  delete:
+
+jobs:
+  mirror:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Push to Forgejo
+        run: |
+          git remote add forgejo https://loke:${{ secrets.FORGEJO_TOKEN }}@git.lorenzoiovino.com/loke/ng2-fittext.git
+          git push forgejo --all --force
+          git push forgejo --tags --force

.github/workflows/npmpub.yml

@@ -0,0 +1,22 @@
+name: Publish to NPM
+
+on:
+  push:
+    branches: [master]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [21.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install
+      - run: npm run pack
+      - run: cp README.md ./dist/lib/README.md
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          package: './dist/lib/package.json'

.github/workflows/tests.yml

@@ -0,0 +1,21 @@
+name: Run CI Tests
+
+on:
+  push:
+    branches:
+      - '*'
+      - '!master'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [21.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - run: npm install
+      - run: npm run test:headless:singleRun

.gitignore

@@ -1,10 +1,10 @@
-# Node generated files
+build
+coverage
+dist
+debug.log
 node_modules
-npm-debug.log
+out-tsc
-# OS generated files
+/.vs
-Thumbs.db
+/.angular
+.idea
 .DS_Store
-# Ignored files
-*.js
-*.map
-*.d.ts

.npmignore

@@ -1,9 +0,0 @@
-# Node generated files
-node_modules
-npm-debug.log
-# OS generated files
-Thumbs.db
-.DS_Store
-# Ignored files
-*.ts
-!*.d.ts

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Unit tests",
+      "address": "localhost",
+      "port": 9333,
+      "sourceMaps": true,
+      "webRoot": "${workspaceFolder}",
+      "pathMapping": {
+        "/_karma_webpack_": "${workspaceFolder}"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "prettier.configPath": "./src/.prettierrc",
+    "editor.formatOnSave": true,
+    "javascript.implicitProjectConfig.experimentalDecorators": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Lorenzo Iovino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,76 +1,141 @@
-# ng2-fittext
+<h1 align="center">
+  ng2-fittext
+</h1>
 
-An Angular2 directive written in pure typescript (and without jquery!), inspired from http://fittextjs.com/, for autoscale the font size of an element to fit an upper level container.
+<p align="center">An Angular 2+ directive, written in pure TypeScript (without jQuery!), to automatically scale the font size of an element so that it fits within its parent container.</p>
 
-### Demo
+[![Download via NPM](https://img.shields.io/npm/v/ng2-fittext.svg)](https://www.npmjs.com/package/ng2-fittext)
+![Angular](https://img.shields.io/badge/Angular-18-green.svg)
+![Build Status](https://github.com/thisloke/ng2-fittext/actions/workflows/tests.yml/badge.svg)
+![Contributions welcome](https://img.shields.io/badge/contributions-welcome-green.svg)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-http://plnkr.co/edit/v0TQaYepV4E2Heur02j5?p=preview
+## Demo
+Check out the live demo: [ng2-fittext Demo](https://stackblitz.com/edit/stackblitz-starters-7ghzat?file=src%2Fmain.ts)
+<div>
+  <img src="ng2-fittext-example.gif" alt="ng2 fittext example" border="0" style="width: 70%" align="center"/>
+</div>
 
-### Installation
+## Installation
+
+Install the library using npm according to your angular version (see table below):
+
+| Angular | ng2-fittext | command                       |
+|---------|-------------|-------------------------------|
+| <= v17  | 1.4.3       | ```npm i ng2-fittext@1.4.3``` |
+| >= v18  | 2.0.0       | ```npm i ng2-fittext@2.0.0``` |
 
-Install the library
-```sh
-$ npm install --save ng2-fittext
-```
 
 ### Usage
 
-Import it in your Angular2 project like a directive
+1. Import the module in your Angular application:
+```ts
+import { Ng2FittextModule } from "ng2-fittext";
 
-1) Declare it in your module
+@NgModule({
-    ```sh
+  imports: [Ng2FittextModule]
-    import {FittextDirective} from "ng2-fittext/ng2-fittext";
+})
-    @NgModule({
+```
-      imports: [
-        ...
-      ],
-      declarations: [
-        FittextDirective
-      ]
-    })
 
-    ```
+2. Use the directive in your components:
+```ts
+import { Component } from '@angular/core';
 
-1) Use it in your components
+@Component({
-    ```sh
+  selector: 'label',
-   import {Component} from '@angular/core';
+  template: `
+    <div #container>
+      <div [fittext]="true" [activateOnResize]="true" [container]="container">Bla bla bla...</div>
+    </div>
+  `
+})
+export class LabelComponent {}
+```
 
-    @Component({
+### Examples
-      selector: 'label',
-      template: `<div #container>
-                    <div [fittext]="true" [onResize]="true" [container]="container">Bla bla bla...</div>
-                </div>`
-    })
 
-    export class LabelComponent {}
+Fit to the parent element (works if you have a variable number of elements between your element and its parent):
 
-    ```
+```ts
+import { Component } from '@angular/core';
 
-   Parameters:
+@Component({
+  selector: 'label',
+  template: `
+    <div>
+      <div [fittext]="true" [activateOnResize]="true">Bla bla bla...</div>
+    </div>
+  `
+})
+export class LabelComponent {}
+```
 
-  | Parameter | Description | Values |
+**NEW! Support for auto-resize input box:**
-  | --- | --- | --- |
-  | fittext | is the selector of the directive | true/false
-  | container | the container to fit | ElementRef
-  | onResize | enable/disable the autofit in case of window resize | true or false (default false)
 
+```ts
+import { Component } from '@angular/core';
 
+@Component({
+  selector: 'inputbox',
+  template: `
+    <div #container>
+      <input [fittext]="true" [activateOnResize]="true" [container]="container" [activateOnInputEvents]="true">
+    </div>
+  `
+})
+export class InputBoxComponent {}
+```
+
+**NEW! Support for maxFontSize:**
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'inputbox',
+  template: `
+    <div>
+      <input [fittext]="true" [activateOnResize]="true" [activateOnInputEvents]="true" [minFontSize]="40" [maxFontSize]="100">
+    </div>
+  `
+})
+export class InputBoxComponent {}
+```
+
+Input Parameters:
+
+| Parameter                       | Description                                                                             | Values                        |
+| ------------------------------- | --------------------------------------------------------------------------------------- | ----------------------------- |
+| fittext                         | Directive selector                                                                      | true/false                    |
+| container                       | The container to fit (if not present it fits to the parent container by default)        | ElementRef                    |
+| activateOnResize                | Enable/disable the autofit on window resize                                             | true or false (default false) |
+| activateOnInputEvents           | Enable/disable the auto-fit in case of input box events (keydown, keyup etc..)          | true or false (default false) |
+| maxFontSize                     | Maximum font size                                                                       | Number (default is 1000)      |
+| **!deprecated!** useMaxFontSize | Use max font size if is true                                                            | Deprecated!                   |
+| minFontSize                     | Minimum font size                                                                       | Number (default is 7)         |
+| modelToWatch                    | Pass model to watch; when this model changes, font size is automatically recalculated   | Any type of model             |
+
+Output Parameters:
+
+| Parameter       | Description       | Values |
+| --------------- | ----------------- | ------ |
+| fontSizeChanged | Current font size | string |
 
 ### Development
 
 Want to contribute? Great!
-Simply, clone the repository and start to improve the code.
+Simply, clone the repository!
+
+I created this library because I always spent too much time solving this problem and didn't find anything on the web (as of 13/03/2017) that does this without jQuery and is easily integrable in Angular 2+.
+While it might not be the best implementation, it gets the job done.
 
 ### Todos
 
- - Write tests
+- Write tests
- - Find a better algorithm to find the font-size who fits better the container.
+- Find a performant algorithm to find the font size that fits the container better
 
-License
+## License
-----
-
-ISC
 
+MIT
 
 **Lorenzo I.**
-  

angular.json

@@ -0,0 +1,140 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "dev": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "prefix": "app"
+        },
+        "@schematics/angular:directive": {
+          "prefix": "app"
+          }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "./src/index.html",
+            "main": "./src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all",
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ]
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "buildTarget": "dev:build"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "dev:build:production"
+            },
+            "development": {
+              "buildTarget": "dev:build:development"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+            ],
+            "scripts": []
+          }
+        }
+      }
+    },
+    "lib": {
+      "projectType": "library",
+      "root": "projects/lib",
+      "sourceRoot": "projects/lib/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/lib/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/lib/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/lib/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

index.ts

@@ -1 +0,0 @@
-export {FittextDirective} from './src/fittext.directive';

ng2-fittext.ts

@@ -1 +0,0 @@
-export {FittextDirective} from './src/fittext.directive';

package.json

@@ -1,36 +1,46 @@
 {
-  "name": "ng2-fittext",
+  "name": "dev",
-  "version": "1.0.2",
+  "version": "0.0.0",
-  "description": "An Angular2 directive for autoscale the font size of an element to fit an upper level container.",
-  "main": "index.js",
   "scripts": {
-    "prepublish": "tsc",
+    "ng": "./node_modules/.bin/ng",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node node_modules/@angular/cli/bin/ng serve",
+    "build": "node node_modules/@angular/cli/bin/ng build --configuration production",
+    "test": "node node_modules/@angular/cli/bin/ng test lib",
+    "test:headless": "node node_modules/@angular/cli/bin/ng test --browsers=ChromeHeadless",
+    "test:headless:singleRun": "node node_modules/@angular/cli/bin/ng test --no-watch --no-progress --browsers=ChromeHeadless lib",
+    "release:minor": "cd ./projects/lib/ && npm version minor",
+    "release:major": "cd ./projects/lib/ && npm version major",
+    "release:patch": "cd ./projects/lib/ && npm version patch",
+    "pack": "npm run build lib && cp ./README.md ./dist/lib/README.md"
   },
-  "repository": {
+  "private": true,
-    "type": "git",
-    "url": "git+https://github.com/lokenxo/ng2-fittext.git"
-  },
-  "keywords": [
-    "angular2",
-    "ng2",
-    "fittext",
-    "ng2-fittext",
-    "responsivefont"
-  ],
-  "author": "Lorenzo Iovino",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/lokenxo/ng2-fittext/issues"
-  },
-  "homepage": "https://github.com/lokenxo/ng2-fittext#readme",
   "dependencies": {
-    "@angular/core": "^2.4.0"
+    "@angular/animations": "^18.0.6",
+    "@angular/common": "^18.0.6",
+    "@angular/compiler": "^18.0.6",
+    "@angular/core": "^18.0.6",
+    "@angular/forms": "^18.0.6",
+    "@angular/platform-browser": "^18.0.6",
+    "@angular/platform-browser-dynamic": "^18.0.6",
+    "@angular/router": "^18.0.6",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "typescript": "~2.0.0"
+    "@angular-devkit/build-angular": "^18.0.7",
-  },
+    "@angular/cli": "^18.0.7",
-  "publishConfig": {
+    "@angular/compiler-cli": "^18.0.6",
-    "registry": "https://registry.npmjs.org/"
+    "@types/jasmine": "~5.1.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^18.18.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^18.0.0",
+    "typescript": "5.4.5"
   }
 }

projects/lib/README.md

@@ -0,0 +1,24 @@
+# Lib
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lib`.
+> Note: Don't forget to add `--project lib` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build lib` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build lib`, go to the dist folder `cd dist/lib` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

projects/lib/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/lib/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "ng2-fittext",
+  "version": "2.0.0",
+  "description": "Ng2-fittext: An Angular2+ directive that change the font size until it fit the upper level container dimension.",
+  "keywords": [
+    "ng2-fittext",
+    "fittext",
+    "angular",
+    "angular 2",
+    "angular 4",
+    "angular 5",
+    "angular 6",
+    "angular 7",
+    "angular 8",
+    "angular 9",
+    "angular 10",
+    "angular 11",
+    "angular 12",
+    "angular 13",
+    "angular 14",
+    "angular 15",
+    "angular 16",
+    "angular 17",
+    "angular 18",
+    "fit text",
+    "responsive text",
+    "responsive font size",
+    "font size"
+  ],
+  "author": "Lorenzo Iovino",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "repository": {
+    "url": "https://github.com/thisloke/ng2-fittext.git"
+  },
+  "sideEffects": false
+}

projects/lib/src/ng2-fittext.directive.spec.ts

@@ -0,0 +1,310 @@
+import { Ng2FittextDirective } from './ng2-fittext.directive';
+import { Renderer2, ElementRef } from '@angular/core';
+
+describe('Class: Ng2FittextDirective', () => {
+  let ng2FittextDirective: Ng2FittextDirective;
+  let elMock: ElementRef;
+
+  beforeEach(() => {
+    elMock = {} as ElementRef;
+    ng2FittextDirective = new Ng2FittextDirective(elMock);
+  });
+
+  describe('Method: setFontSize', () => {
+    let newFontSize: number;
+    let isVisibleSpy: jasmine.Spy;
+    let isDoneSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      newFontSize = 100;
+      isVisibleSpy = spyOn(ng2FittextDirective, 'isVisible').and.returnValue(
+        true
+      );
+      isDoneSpy = spyOn(ng2FittextDirective, 'isDone').and.returnValue(false);
+      elMock.nativeElement = {
+        style: {
+          setProperty: () => {},
+        },
+      };
+    });
+
+    it('Should not change the font size if the element is not visible', () => {
+      isVisibleSpy.and.returnValue(false);
+      const previousFontSize: number = ng2FittextDirective.getFontSize();
+      ng2FittextDirective.setFontSize(newFontSize);
+      expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize);
+    });
+
+    it('Should not change the font size if the fitting operation is done', () => {
+      isDoneSpy.and.returnValue(true);
+      const previousFontSize: number = ng2FittextDirective.getFontSize();
+      ng2FittextDirective.setFontSize(newFontSize);
+      expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize);
+    });
+
+    it('Should use the minFontSize property value if the specified font size is smaller', () => {
+      const minFontSize: number = ng2FittextDirective.minFontSize;
+      newFontSize = 5;
+      ng2FittextDirective.setFontSize(newFontSize);
+      const currentFontSize: number = ng2FittextDirective.getFontSize();
+      expect(currentFontSize).toEqual(minFontSize);
+    });
+
+    it('Should use the maxFontSize property value if the specified font size is bigger', () => {
+      const maxFontSize: number = ng2FittextDirective.maxFontSize;
+      newFontSize = 1001;
+      ng2FittextDirective.setFontSize(newFontSize);
+      const currentFontSize: number = ng2FittextDirective.getFontSize();
+      expect(currentFontSize).toEqual(maxFontSize);
+    });
+
+    it('Should set a new fontSize value', () => {
+      newFontSize = 500;
+      ng2FittextDirective.setFontSize(newFontSize);
+      const currentFontSize: number = ng2FittextDirective.getFontSize();
+      expect(currentFontSize).toEqual(newFontSize);
+    });
+
+    it('Should emit the font size change', () => {
+      newFontSize = 500;
+      spyOn(ng2FittextDirective.fontSizeChanged, 'emit');
+      ng2FittextDirective.setFontSize(newFontSize);
+      expect(ng2FittextDirective.fontSizeChanged.emit).toHaveBeenCalledWith(
+        newFontSize
+      );
+    });
+
+    it('Should update the nativeElement with the new font size', () => {
+      newFontSize = 500;
+      spyOn(ng2FittextDirective.el.nativeElement.style, 'setProperty');
+      ng2FittextDirective.setFontSize(newFontSize);
+      expect(
+        ng2FittextDirective.el.nativeElement.style.setProperty
+      ).toHaveBeenCalledWith('font-size', `${newFontSize}px`);
+    });
+  });
+
+  describe('Method: getFontSize', () => {
+    it('Should return the current font size', () => {
+      expect(ng2FittextDirective.getFontSize()).toEqual(1000);
+    });
+  });
+
+  describe('Method: calculateFontSize', () => {
+    it('Should return the font size rounded down', () => {
+      expect(ng2FittextDirective.calculateFontSize(10, 3)).toEqual(3);
+      expect(ng2FittextDirective.calculateFontSize(9, 3)).toEqual(3);
+      expect(ng2FittextDirective.calculateFontSize(8, 3)).toEqual(2);
+    });
+  });
+
+  describe('Method: checkOverflow', () => {
+    let parentElementMock: HTMLElement;
+    let childrenElementMock: HTMLElement;
+    let hasXAxisOverflowSpy: jasmine.Spy;
+    let hasYAxisOverflowSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      parentElementMock = {} as HTMLElement;
+      childrenElementMock = {} as HTMLElement;
+      hasXAxisOverflowSpy = spyOn(
+        ng2FittextDirective,
+        'hasXAxisOverflow'
+      ).and.returnValue(false);
+      hasYAxisOverflowSpy = spyOn(
+        ng2FittextDirective,
+        'hasYAxisOverflow'
+      ).and.returnValue(false);
+    });
+
+    it('Should return false if no overflow is present', () => {
+      expect(
+        ng2FittextDirective.checkOverflow(
+          parentElementMock,
+          childrenElementMock
+        )
+      ).toBe(false);
+    });
+
+    it('Should return true if x axis has overflow', () => {
+      hasXAxisOverflowSpy.and.returnValue(true);
+      expect(
+        ng2FittextDirective.checkOverflow(
+          parentElementMock,
+          childrenElementMock
+        )
+      ).toBe(true);
+    });
+
+    it('Should return true if y axis has overflow', () => {
+      hasYAxisOverflowSpy.and.returnValue(true);
+      expect(
+        ng2FittextDirective.checkOverflow(
+          parentElementMock,
+          childrenElementMock
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe('Method: getStartFontSizeFromHeight', () => {
+    it('Should return the container clientHeight value if the container is present', () => {
+      const containerClientHeight = 10;
+      ng2FittextDirective.container = {
+        clientHeight: containerClientHeight,
+      } as HTMLElement;
+      expect(ng2FittextDirective.getStartFontSizeFromHeight()).toEqual(
+        containerClientHeight
+      );
+    });
+
+    it('Should return the parentElement clientHeight value if no container is present', () => {
+      const parentlientHeight = 11;
+      elMock.nativeElement = {
+        parentElement: {
+          clientHeight: parentlientHeight,
+        },
+      } as HTMLElement;
+      expect(ng2FittextDirective.getStartFontSizeFromHeight()).toEqual(
+        parentlientHeight
+      );
+    });
+  });
+
+  describe('Method: isDone', () => {
+    it('Should return the done property value', () => {
+      const defaultDoneValue = false;
+      expect(ng2FittextDirective.isDone()).toBe(defaultDoneValue);
+    });
+  });
+
+  describe('Method: isVisible', () => {
+    it('Should return the true if getStartFontSizeFromHeight() is greater than zero', () => {
+      spyOn(ng2FittextDirective, 'getStartFontSizeFromHeight').and.returnValue(
+        1
+      );
+      expect(ng2FittextDirective.isVisible()).toBe(true);
+    });
+
+    it('Should return the false if getStartFontSizeFromHeight() is smaller or equal to zero', () => {
+      const spy = spyOn(
+        ng2FittextDirective,
+        'getStartFontSizeFromHeight'
+      ).and.returnValue(0);
+      expect(ng2FittextDirective.isVisible()).toBe(false);
+      spy.and.returnValue(-1);
+      expect(ng2FittextDirective.isVisible()).toBe(false);
+    });
+  });
+
+  describe('Method: hasXAxisOverflow', () => {
+    let parentElementMock: HTMLElement;
+    let childrenElementMock: HTMLElement;
+
+    beforeEach(() => {
+      parentElementMock = {
+        clientWidth: 0,
+      } as HTMLElement;
+      childrenElementMock = {
+        scrollWidth: 0,
+      } as HTMLElement;
+    });
+
+    it('Should return false if no overflow is present on the x axis', () => {
+      expect(
+        ng2FittextDirective.hasXAxisOverflow(
+          parentElementMock,
+          childrenElementMock
+        )
+      ).toBe(false);
+    });
+
+    it('Should return true if overflow is present on the x axis', () => {
+      childrenElementMock = {
+        scrollWidth: 2,
+      } as HTMLElement;
+      expect(
+        ng2FittextDirective.hasXAxisOverflow(
+          parentElementMock,
+          childrenElementMock
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe('Method: hasYAxisOverflow', () => {
+    let parentElementMock: HTMLElement;
+    let childrenElementMock: HTMLElement;
+
+    beforeEach(() => {
+      parentElementMock = {
+        clientHeight: 0,
+      } as HTMLElement;
+      childrenElementMock = {
+        clientHeight: 0,
+      } as HTMLElement;
+    });
+
+    it('Should return false if no overflow is present on the x axis', () => {
+      expect(
+        ng2FittextDirective.hasYAxisOverflow(
+          parentElementMock,
+          childrenElementMock
+        )
+      ).toBe(false);
+    });
+
+    it('Should return true if overflow is present on the x axis', () => {
+      childrenElementMock = {
+        clientHeight: 2,
+      } as HTMLElement;
+      expect(
+        ng2FittextDirective.hasYAxisOverflow(
+          parentElementMock,
+          childrenElementMock
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe('Method: hasOverflow', () => {
+    let containerMock: any;
+    let parentElementMock: any;
+
+    beforeEach(() => {
+      containerMock = {
+        isContainer: true,
+      };
+      parentElementMock = {
+        isParentElement: true,
+      };
+      ng2FittextDirective.container = { ...containerMock };
+      ng2FittextDirective.el.nativeElement = {
+        parentElement: { ...parentElementMock },
+      } as HTMLElement;
+    });
+
+    it('Should calculate the overflow using the container if is present', () => {
+      spyOn(ng2FittextDirective, 'checkOverflow').and.callFake(
+        (parentElement: any, childrenElement: any) => {
+          expect(parentElement).toEqual(containerMock);
+          return true;
+        }
+      );
+      expect(ng2FittextDirective.hasOverflow()).toBe(true);
+    });
+
+    it('Should calculate the overflow using the parent element if the container is not present', () => {
+      if(ng2FittextDirective) {
+        delete (ng2FittextDirective as any).container;
+      }
+      spyOn(ng2FittextDirective, 'checkOverflow').and.callFake(
+        (parentElement: any, childrenElement: any) => {
+          expect(parentElement).toEqual(parentElementMock);
+          return true;
+        }
+      );
+      expect(ng2FittextDirective.hasOverflow()).toBe(true);
+    });
+  });
+});

projects/lib/src/ng2-fittext.directive.ts

@@ -0,0 +1,170 @@
+import {
+  AfterViewChecked,
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  OnInit,
+} from '@angular/core';
+
+@Directive({
+  selector: '[fittext]',
+})
+export class Ng2FittextDirective
+  implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
+  @Input('fittext') fittext: any;
+  @Input('activateOnResize') activateOnResize: boolean = true;
+  @Input('container') container: HTMLElement | null = null;
+  @Input('activateOnInputEvents') activateOnInputEvents: boolean = false;
+  @Input('minFontSize') minFontSize = 7;
+  @Input('maxFontSize') maxFontSize = 1000;
+
+  /* Deprecated */
+  @Input('useMaxFontSize') useMaxFontSize = true;
+
+  @Input('modelToWatch') modelToWatch: any;
+
+  @Output() fontSizeChanged: EventEmitter<number> = new EventEmitter();
+
+  private fontSize = 1000;
+  private speed = 1.05;
+  private done = false;
+
+  constructor(public el: ElementRef<HTMLElement>) {}
+
+  setFontSize(fontSize: number): void {
+    if (this.isVisible() && !this.isDone()) {
+      if (fontSize < this.minFontSize) {
+        fontSize = this.minFontSize;
+      }
+      if (fontSize > this.maxFontSize) {
+        fontSize = this.maxFontSize;
+      }
+      this.fontSize = fontSize;
+      this.fontSizeChanged.emit(fontSize);
+      this.el.nativeElement.style.setProperty(
+        'font-size',
+        fontSize.toString() + 'px'
+      );
+    }
+  }
+
+  getFontSize(): number {
+    return this.fontSize;
+  }
+
+  calculateFontSize(fontSize: number, speed: number): number {
+    return Math.floor(fontSize / speed);
+  }
+
+  checkOverflow(parent: HTMLElement, children: HTMLElement): boolean {
+    return (
+      this.hasXAxisOverflow(parent, children) ||
+      this.hasYAxisOverflow(parent, children)
+    );
+  }
+
+  hasXAxisOverflow(parent: HTMLElement, children: HTMLElement): boolean {
+    return children.scrollWidth - parent.clientWidth > 0;
+  }
+
+  hasYAxisOverflow(parent: HTMLElement, children: HTMLElement): boolean {
+    return children.clientHeight - parent.clientHeight > 0;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: Event) {
+    this.done = false;
+    if (this.activateOnResize && this.fittext) {
+      if (this.activateOnInputEvents && this.fittext) {
+        this.setFontSize(this.getStartFontSizeFromHeight());
+      } else {
+        this.setFontSize(this.getStartFontSizeFromWeight());
+      }
+
+      this.ngAfterViewInit();
+    }
+  }
+
+  @HostListener('input', ['$event'])
+  onInputEvents(event: Event) {
+    this.done = false;
+    if (this.activateOnInputEvents && this.fittext) {
+      this.setFontSize(this.getStartFontSizeFromHeight());
+      this.ngAfterViewInit();
+    }
+  }
+
+  ngOnInit() {
+    this.done = false;
+    this.el.nativeElement.style.setProperty('will-change', 'content');
+    this.ngAfterViewInit();
+  }
+
+  ngAfterViewInit() {
+    if (this.isVisible() && !this.isDone()) {
+      if (this.fittext) {
+        if (this.hasOverflow()) {
+          if (this.fontSize > this.minFontSize) {
+            // iterate only until font size is bigger than minimal value
+            this.setFontSize(this.calculateFontSize(this.fontSize, this.speed));
+            this.ngAfterViewInit();
+          }
+        } else {
+          this.done = true;
+        }
+      }
+    }
+  }
+
+  ngOnChanges(changes: any): void {
+    if (changes.modelToWatch) {
+      // change of model to watch - call ngAfterViewInit where is implemented logic to change size
+      setTimeout(() => {
+        this.done = false;
+        this.setFontSize(this.maxFontSize);
+        this.ngAfterViewInit();
+      });
+    }
+  }
+
+  ngAfterViewChecked() {
+    if (this.fontSize > this.minFontSize) {
+      this.setFontSize(this.getStartFontSizeFromHeight());
+      this.ngAfterViewInit();
+    }
+  }
+
+  getStartFontSizeFromHeight(): number {
+    return this.container
+      ? this.container.clientHeight
+      : this.el.nativeElement.parentElement!.clientHeight;
+  }
+
+  private getStartFontSizeFromWeight(): number {
+    return this.container
+      ? this.container.clientWidth
+      : this.el.nativeElement.parentElement!.clientWidth;
+  }
+
+  isDone(): boolean {
+    return this.done;
+  }
+
+  isVisible(): boolean {
+    return this.getStartFontSizeFromHeight() > 0;
+  }
+
+  hasOverflow(): boolean {
+    return this.container
+      ? this.checkOverflow(this.container, this.el.nativeElement)
+      : this.checkOverflow(
+          this.el.nativeElement.parentElement!,
+          this.el.nativeElement
+        );
+  }
+}

projects/lib/src/ng2-fittext.module.ts

@@ -0,0 +1,19 @@
+import { Ng2FittextDirective } from './ng2-fittext.directive';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+export { Ng2FittextDirective } from './ng2-fittext.directive';
+
+@NgModule({
+  declarations: [Ng2FittextDirective],
+  exports: [Ng2FittextDirective],
+  imports: [CommonModule],
+})
+export class Ng2FittextModule {
+  static forRoot() {
+    return {
+      ngModule: Ng2FittextModule,
+      providers: [],
+    };
+  }
+}

projects/lib/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of lib
+ */
+
+export * from './ng2-fittext.directive';
+export * from './ng2-fittext.module';

projects/lib/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

projects/lib/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

projects/lib/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

src/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "arrowParens": "always"
+}

src/app/app.component.html

@@ -0,0 +1,30 @@
+<h2>Add text or remove text from div (max and min font size)</h2>
+<div style="border: 2px solid; overflow:hidden; width:100%; height:300px; font-size:520px;">
+  <div [fittext]="true"
+       [modelToWatch]="title"
+       [maxFontSize]="50"
+       [minFontSize]="30"
+       [activateOnResize]="true">{{title}}</div>
+</div>
+
+
+<h2>Add text or remove text from div (no max and no min font size)</h2>
+<div style="border: 2px solid; overflow:hidden; width:100%; height:300px; font-size:520px;">
+  <div [fittext]="true"
+       [modelToWatch]="title"
+       [activateOnResize]="true">{{title}}</div>
+</div>
+
+<button (click)="click('add')"> ADD text</button>
+<button (click)="click('remove')"> REMOVE text</button>
+
+<br/>
+<br/>
+<h2>Write text in input box (text fit inside without overflowing)</h2>
+<div #cont2 style="border: 2px solid; height:101px; width:300px;">
+  <input [fittext]="true"
+         style="width:100%; height:100px"
+         [activateOnResize]="true"
+         [activateOnInputEvents]="true"
+         [container]="cont2">
+</div>

src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+   title = 'sdf fsd fsd fsdfsdfsdfsdfsfdf sdfsdf sdfs df fsdfsdfsdfsdfsfdf fsdfsdfsdfsdfsfdf fsdfsdfsdfsdfsfdf ' +
+     'fsdfsdfsdfsdfsfdf fsdfsdfsdfsdfsfdf';
+
+  click(par: string) {
+    this.title = par === 'add' ? (this.title  + this.title) : (this.title.substring(0, this.title.length / 2 + 10));
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,17 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { Ng2FittextModule } from '../../projects/lib/src/ng2-fittext.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    Ng2FittextModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/environments/environment.ts

@@ -0,0 +1,15 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * In development mode, to ignore zone related error stack frames such as
+ * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * import the following file, but please comment it out in production mode
+ * because it will have performance impact when throw error
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/fittext.directive.spec.ts

@@ -1,8 +0,0 @@
-import { FittextDirective } from './fittext.directive';
-
-describe('FittextDirective', () => {
-  it('should create an instance', () => {
-    const directive = new FittextDirective();
-    expect(directive).toBeTruthy();
-  });
-});

src/fittext.directive.ts

@@ -1,43 +0,0 @@
-import {Directive, ElementRef, Renderer, Input, AfterViewInit, HostListener} from '@angular/core';
-
-@Directive({
-  selector: '[fittext]'
-})
-export class FittextDirective implements AfterViewInit {
-
-  @Input('fittext') fittext: any;
-  @Input('container') container: any;
-  @Input('onResize') activateOnResize: boolean;
-  public fontSize:number = 0;
-  public speed:number = 1.05;
-
-  constructor(public el: ElementRef, public renderer: Renderer) {
-  }
-
-  checkOverflowX(parent:any, children:any) {
-    return children.clientHeight > parent.clientHeight;
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize() {
-    if(this.activateOnResize){
-      this.fontSize = 0;
-      this.ngAfterViewInit();
-    }
-  }
-
-  ngAfterViewInit() {
-    if (this.fittext) {
-      if(this.fontSize == 0){
-        this.fontSize = this.container.clientWidth;
-        this.el.nativeElement.style.setProperty('font-size', (this.fontSize).toString()+'px');
-      }
-      let overflow = this.checkOverflowX(this.container, this.el.nativeElement);
-      if(overflow) {
-        this.fontSize = Math.floor(this.fontSize/this.speed);
-        this.el.nativeElement.style.setProperty('font-size', (this.fontSize).toString()+'px');
-        this.ngAfterViewInit();
-      }
-    }
-  }
-}

src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Dev</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

src/test.ts

@@ -0,0 +1,14 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [
+      "node"
+    ]
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.json

@@ -1,19 +1,41 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
-    "module": "commonjs",
+    "baseUrl": "./",
-    "moduleResolution": "node",
+    "outDir": "./dist/out-tsc",
-    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "paths": {
+      "lib": [
+        "./dist/lib"
+      ]
+    },
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
     "sourceMap": true,
-    "inlineSources": false,
     "declaration": false,
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
+    "moduleResolution": "node",
-    "stripInternal": true,
+    "importHelpers": true,
-    "skipLibCheck": true
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ],
   },
   "files": [
-    "ng2-fittext.ts",
+    "./src/main.ts"
-    "ng2-fittext.d.ts",
+  ],
-    "index.ts"
+  "angularCompilerOptions": {
-  ]
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
 }

tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}