Ref: changed file and folder organization

src/lib/.gitignore

@@ -0,0 +1,6 @@
+build
+coverage
+dist
+debug.log
+node_modules
+out-tsc

src/lib/.npmignore

@@ -0,0 +1,23 @@
+*.spec.ts
+*.tgz
+.erector
+.gitignore
+.npmignore
+.vscode
+build
+coverage
+debug.log
+DEVELOPMENT.md
+dist
+karma.conf.js
+node_modules
+out-tsc
+src
+tasks
+test.ts
+tsconfig.*json
+tslint.json
+typings
+typings.json
+vendor.ts
+webpack

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

@@ -0,0 +1,152 @@
+import {
+  AfterViewChecked,
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  OnInit,
+  Renderer2,
+} from '@angular/core';
+
+@Directive({
+  selector: '[fittext]',
+})
+export class Ng2FittextDirective
+  implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
+  @Input('fittext') fittext: any;
+  @Input('activateOnResize') activateOnResize: boolean;
+  @Input('container') container: HTMLElement;
+  @Input('activateOnInputEvents') activateOnInputEvents: boolean;
+  @Input('minFontSize') minFontSize = 7;
+  @Input('maxFontSize') maxFontSize = 1000;
+
+  /* Deprecated */
+  @Input('useMaxFontSize') useMaxFontSize = true;
+
+  @Input('modelToWatch') modelToWatch: any;
+
+  @Output() fontSizeChanged = new EventEmitter();
+
+  private fontSize = 1000;
+  private speed = 1.05;
+  private done = false;
+
+  constructor(public el: ElementRef, public renderer: Renderer2) {}
+
+  setFontSize(fontSize: number) {
+    if (this.isVisible() && !this.done) {
+      if (fontSize < this.minFontSize) {
+        fontSize = this.minFontSize;
+      }
+      if (fontSize > this.maxFontSize) {
+        fontSize = this.maxFontSize;
+      }
+
+      this.fontSize = fontSize;
+      this.fontSizeChanged.emit(fontSize);
+      return this.el.nativeElement.style.setProperty(
+        'font-size',
+        fontSize.toString() + 'px'
+      );
+    }
+  }
+
+  calculateFontSize(fontSize: number, speed: number) {
+    return Math.floor(fontSize / speed);
+  }
+
+  checkOverflow(parent: any, children: any) {
+    const overflowX = children.scrollWidth - parent.clientWidth;
+    const overflowY = children.clientHeight - parent.clientHeight;
+    return overflowX > 1 || overflowY > 1;
+  }
+
+  @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.done) {
+      if (this.fittext) {
+        const overflow = this.container
+          ? this.checkOverflow(this.container, this.el.nativeElement)
+          : this.checkOverflow(
+              this.el.nativeElement.parentElement,
+              this.el.nativeElement
+            );
+        if (overflow) {
+          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();
+    }
+  }
+
+  private 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;
+  }
+
+  private isVisible(): boolean {
+    return this.getStartFontSizeFromHeight() > 0;
+  }
+}

src/lib/ng2-fittext.module.ts

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

src/lib/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ng2-fittext",
+  "version": "1.2.11",
+  "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",
+    "fit text",
+    "responsive text"
+  ],
+  "author": "Lorenzo Iovino",
+  "license": "MIT",
+  "ngPackage": {
+    "lib": {
+      "entryFile": "./ng2-fittext.module.ts"
+    }
+  },
+  "repository": {
+    "url": "https://github.com/lokenxo/ng2-fittext.git"
+  }
+}

src/lib/tsconfig.json

@@ -0,0 +1,35 @@
+{
+    "angularCompilerOptions": {
+        "strictMetadataEmit": true,
+        "skipTemplateCodegen": true
+    },
+    "compilerOptions": {
+        "baseUrl": "tsconfig",
+        "declaration": true,
+        "stripInternal": true,
+        "strictNullChecks": true,
+        "noImplicitAny": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "lib": ["es2015", "dom", "es5"],
+        "inlineSources": true,
+        "rootDir": "./src",
+        "mapRoot": "./",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "outDir": "./dist",
+        "sourceMap": true,
+        "target": "es5",
+        "typeRoots": [
+            "./node_modules/@types"
+        ],
+        "paths": {
+            "@angular/core": ["./node_modules/@angular/core"]
+        }
+    },
+    "files": [
+    ],
+    "awesomeTypescriptLoaderOptions": {
+        "forkChecker": true
+    }
+}