@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, input, Directive } from '@angular/core';
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { WaMutationObserverService, WA_MUTATION_OBSERVER_INIT } from '@ng-web-apis/mutation-observer';
import { WaResizeObserverService } from '@ng-web-apis/resize-observer';
import { tuiZonefree } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { merge, fromEvent } from 'rxjs';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';

const TUI_FLUID_TYPOGRAPHY_DEFAULT_OPTIONS = {
    min: 0.625,
    max: 1.25,
};
const [TUI_FLUID_TYPOGRAPHY_OPTIONS, tuiFluidTypographyOptionsProvider] = tuiCreateOptions(TUI_FLUID_TYPOGRAPHY_DEFAULT_OPTIONS);

const STEP = 1 / 16;
class TuiFluidTypography {
    constructor() {
        this.el = tuiInjectElement();
        this.options = inject(TUI_FLUID_TYPOGRAPHY_OPTIONS);
        this.tuiFluidTypography = input('');
        this.sub = merge(toObservable(this.tuiFluidTypography), inject(WaResizeObserverService, { self: true }), inject(WaMutationObserverService, { 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 = `calc(${i}rem + var(--tui-font-offset))`;
                if (this.el.scrollWidth <= this.el.clientWidth) {
                    break;
                }
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiFluidTypography, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiFluidTypography, isStandalone: true, selector: "[tuiFluidTypography]", inputs: { tuiFluidTypography: { classPropertyName: "tuiFluidTypography", publicName: "tuiFluidTypography", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiFluidTypography": "" } }, providers: [
            WaResizeObserverService,
            WaMutationObserverService,
            {
                provide: WA_MUTATION_OBSERVER_INIT,
                useValue: { characterData: true, subtree: true },
            },
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiFluidTypography, decorators: [{
            type: Directive,
            args: [{
                    selector: '[tuiFluidTypography]',
                    providers: [
                        WaResizeObserverService,
                        WaMutationObserverService,
                        {
                            provide: WA_MUTATION_OBSERVER_INIT,
                            useValue: { characterData: true, subtree: true },
                        },
                    ],
                    host: { tuiFluidTypography: '' },
                }]
        }] });

/**
 * 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