a4-fit-text/fesm5/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';

var FitTextComponent = /** @class */ (function () {
    function FitTextComponent(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;
    }
    Object.defineProperty(FitTextComponent.prototype, "text", {
        set: function (t) {
            this.text$.next(t);
        },
        enumerable: true,
        configurable: true
    });
    FitTextComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.text$.pipe(filter(function (p) { return !!p && _this.ready; })).subscribe(function (p) { return _this.update(); });
    };
    FitTextComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        this.ready = true;
        this.g1Rect = this.g1.nativeElement.getBBox();
        setTimeout(function () { return _this.update(); }, 0);
    };
    FitTextComponent.prototype.update = function () {
        this.g2Transform$.next("translate(0, -" + this.g1Rect.height / 2 + ")");
        var rect = this.elementRef.nativeElement.parentNode.getBoundingClientRect();
        var scaleX = rect.width / this.g1Rect.width;
        var scaleY = rect.height / this.g1Rect.height;
        var scale = Math.min(scaleX, scaleY);
        this.g1Transform$.next("scale(" + scale + ")");
        var x = rect.width / 2;
        var y = rect.height / 2 - this.g1Rect.y;
        this.g0Transform$.next("translate(" + x + ", " + y + ")");
        this.width$.next(rect.width);
        this.height$.next(rect.height);
    };
    FitTextComponent.prototype.resize = function (event) {
        this.update();
    };
    FitTextComponent.ctorParameters = function () { return [
        { 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: "\n  <svg #svg [attr.width]=\"width$ | async\" [attr.height]=\"height$ | async\">\n    <g #g0 [attr.transform]=\"g0Transform$ | async\">\n      <g #g1 [attr.transform]=\"g1Transform$ | async\">\n        <g #g2 [attr.transform]=\"g2Transform$ | async\">\n          <text #te text-anchor=\"middle\" dy=\"1em\">{{text$ | async}}</text>\n        </g>\n      </g>\n    </g>\n  </svg>\n  ",
            changeDetection: ChangeDetectionStrategy.OnPush,
            styles: ["\n:host {\n  display: block;\n}\n  "]
        }),
        __metadata("design:paramtypes", [ElementRef])
    ], FitTextComponent);
    return FitTextComponent;
}());

var FitTextModule = /** @class */ (function () {
    function FitTextModule() {
    }
    FitTextModule = __decorate([
        NgModule({
            imports: [
                CommonModule
            ],
            declarations: [FitTextComponent],
            exports: [FitTextComponent]
        })
    ], FitTextModule);
    return FitTextModule;
}());

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

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

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