@taiga-ui/kit/fesm2022/taiga-ui-kit-directives-fluid-typography.mjs

Taiga UI Angular main components kit

import * as i0 from '@angular/core';
import { inject, Directive, Input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MutationObserverService, WA_MUTATION_OBSERVER_INIT } from '@ng-web-apis/mutation-observer';
import { ResizeObserverService } from '@ng-web-apis/resize-observer';
import { tuiZonefree } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { Subject, merge, fromEvent } from 'rxjs';
import { tuiCreateToken, tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';

const TUI_FLUID_TYPOGRAPHY_DEFAULT_OPTIONS = {
    min: 0.625,
    max: 1.5,
};
const TUI_FLUID_TYPOGRAPHY_OPTIONS = tuiCreateToken(TUI_FLUID_TYPOGRAPHY_DEFAULT_OPTIONS);
function tuiFluidTypographyOptionsProvider(options) {
    return tuiProvideOptions(TUI_FLUID_TYPOGRAPHY_OPTIONS, options, TUI_FLUID_TYPOGRAPHY_DEFAULT_OPTIONS);
}

const STEP = 1 / 16;
class TuiFluidTypography {
    constructor() {
        // TODO: refactor to signal inputs after Angular update
        this.changes$ = new Subject();
        this.el = tuiInjectElement();
        this.options = inject(TUI_FLUID_TYPOGRAPHY_OPTIONS);
        this.sub = merge(this.changes$, inject(ResizeObserverService, { self: true }), inject(MutationObserverService, { self: true }), fromEvent(this.el, 'input'))
            .pipe(tuiZonefree(), takeUntilDestroyed())
            .subscribe(() => {
            const min = Number(this.tuiFluidTypography[0] || this.options.min);
            const max = Number(this.tuiFluidTypography[1] || this.options.max);
            for (let i = max; i >= min; i -= STEP) {
                this.el.style.fontSize = `${i}rem`;
                if (this.el.scrollWidth <= this.el.clientWidth) {
                    break;
                }
            }
        });
        this.tuiFluidTypography = '';
    }
    ngOnChanges() {
        this.changes$.next();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFluidTypography, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiFluidTypography, isStandalone: true, selector: "[tuiFluidTypography]", inputs: { tuiFluidTypography: "tuiFluidTypography" }, host: { attributes: { "tuiFluidTypography": "" } }, providers: [
            ResizeObserverService,
            MutationObserverService,
            {
                provide: WA_MUTATION_OBSERVER_INIT,
                useValue: { characterData: true, subtree: true },
            },
        ], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFluidTypography, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiFluidTypography]',
                    providers: [
                        ResizeObserverService,
                        MutationObserverService,
                        {
                            provide: WA_MUTATION_OBSERVER_INIT,
                            useValue: { characterData: true, subtree: true },
                        },
                    ],
                    host: { tuiFluidTypography: '' },
                }]
        }], propDecorators: { tuiFluidTypography: [{
                type: Input
            }] } });

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

export { TUI_FLUID_TYPOGRAPHY_DEFAULT_OPTIONS, TUI_FLUID_TYPOGRAPHY_OPTIONS, TuiFluidTypography, tuiFluidTypographyOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-directives-fluid-typography.mjs.map