a4-fit-text/fesm2015/a4-fit-text.js

Angular Fit Text (Auto scale text to fit container) component

import { __decorate, __metadata } from 'tslib';
import { ElementRef, Input, ViewChild, HostListener, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { CommonModule } from '@angular/common';

let FitTextComponent = class FitTextComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
        this.text$ = new BehaviorSubject(null);
        this.width$ = new BehaviorSubject(0);
        this.height$ = new BehaviorSubject(0);
        this.g0Transform$ = new BehaviorSubject('');
        this.g1Transform$ = new BehaviorSubject('');
        this.g2Transform$ = new BehaviorSubject('');
        this.ready = false;
    }
    set text(t) {
        this.text$.next(t);
    }
    ngOnInit() {
        this.text$.pipe(filter(p => !!p && this.ready)).subscribe(p => this.update());
    }
    ngAfterViewInit() {
        this.ready = true;
        this.g1Rect = this.g1.nativeElement.getBBox();
        setTimeout(() => this.update(), 0);
    }
    update() {
        this.g2Transform$.next(`translate(0, -${this.g1Rect.height / 2})`);
        const rect = this.elementRef.nativeElement.parentNode.getBoundingClientRect();
        const scaleX = rect.width / this.g1Rect.width;
        const scaleY = rect.height / this.g1Rect.height;
        const scale = Math.min(scaleX, scaleY);
        this.g1Transform$.next(`scale(${scale})`);
        const x = rect.width / 2;
        const y = rect.height / 2 - this.g1Rect.y;
        this.g0Transform$.next(`translate(${x}, ${y})`);
        this.width$.next(rect.width);
        this.height$.next(rect.height);
    }
    resize(event) {
        this.update();
    }
};
FitTextComponent.ctorParameters = () => [
    { type: ElementRef }
];
__decorate([
    Input(),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], FitTextComponent.prototype, "text", null);
__decorate([
    ViewChild('g1', { static: true }),
    __metadata("design:type", ElementRef)
], FitTextComponent.prototype, "g1", void 0);
__decorate([
    HostListener('window:resize', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], FitTextComponent.prototype, "resize", null);
FitTextComponent = __decorate([
    Component({
        selector: 'fit-text',
        template: `
  <svg #svg [attr.width]="width$ | async" [attr.height]="height$ | async">
    <g #g0 [attr.transform]="g0Transform$ | async">
      <g #g1 [attr.transform]="g1Transform$ | async">
        <g #g2 [attr.transform]="g2Transform$ | async">
          <text #te text-anchor="middle" dy="1em">{{text$ | async}}</text>
        </g>
      </g>
    </g>
  </svg>
  `,
        changeDetection: ChangeDetectionStrategy.OnPush,
        styles: [`
:host {
  display: block;
}
  `]
    }),
    __metadata("design:paramtypes", [ElementRef])
], FitTextComponent);

let FitTextModule = class FitTextModule {
};
FitTextModule = __decorate([
    NgModule({
        imports: [
            CommonModule
        ],
        declarations: [FitTextComponent],
        exports: [FitTextComponent]
    })
], FitTextModule);

/*
 * Public API Surface of a4-fit-text
 */

/**
 * Generated bundle index. Do not edit.
 */

export { FitTextComponent, FitTextModule };
//# sourceMappingURL=a4-fit-text.js.map