@alyle/ui/fesm2022/alyle-ui-typography.mjs

Minimal Design, a set of components for Angular

import * as i0 from '@angular/core';
import { Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { st2c, StyleCollection, mixinStyleUpdater, mixinColor, StyleRenderer, LyCommonModule } from '@alyle/ui';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

const STYLE_PRIORITY = -1;
const STYLES = (theme) => {
    return {
        $name: LyTypography.и,
        $priority: STYLE_PRIORITY,
        root: (_className) => `${_className}{margin:0;display:block;font-family:${theme.typography.fontFamily};}${st2c(((theme.typography
            && theme.typography.root
            && (theme.typography.root instanceof StyleCollection
                ? theme.typography.root.setTransformer(fn => fn()).css
                : theme.typography.root()))), `${_className}`)}`,
        gutterTop: (_className) => `${_className}{margin-top:0.35em;}`,
        gutterBottom: (_className) => `${_className}{margin-bottom:0.35em;}`,
        gutter: (_className) => `${_className}{margin:0.35em 0;}`
    };
};
/** @docs-private */
class LyTypographyBase {
    constructor(_theme) {
        this._theme = _theme;
    }
}
/** @docs-private */
const LyTypographyMixinBase = mixinStyleUpdater(mixinColor((LyTypographyBase)));
class LyTypography extends LyTypographyMixinBase {
    /** @docs-private */
    static { this.и = 'LyTypography'; }
    set lyTyp(val) {
        if (val !== this.lyTyp) {
            if (val) {
                this._lyTypClass = this._createTypClass(val, this._lyTypClass);
            }
            else if (this._lyTypClass) {
                this.renderer.removeClass(this._el.nativeElement, this._lyTypClass);
                this._lyTypClass = null;
            }
        }
    }
    get lyTyp() {
        return this._lyTyp;
    }
    /** The text will truncate with an ellipsis. */
    set noWrap(val) {
        const newValue = coerceBooleanProperty(val);
        if (newValue) {
            this._noWrapClass = this._theme.addSimpleStyle('lyTyp.noWrap', {
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
            });
            this.renderer.addClass(this._el.nativeElement, this._noWrapClass);
        }
        else if (this._noWrapClass) {
            this.renderer.removeClass(this._el.nativeElement, this._noWrapClass);
            this._noWrapClass = undefined;
        }
    }
    get noWrap() {
        return this._noWrap;
    }
    set gutter(val) {
        const newVal = coerceBooleanProperty(val);
        if (newVal !== this.gutter) {
            this._gutter = newVal;
            this.sRenderer.toggleClass(this.classes.gutter, newVal);
        }
    }
    get gutter() {
        return this._gutter;
    }
    set gutterTop(val) {
        const newVal = coerceBooleanProperty(val);
        if (newVal !== this.gutterTop) {
            this._gutterTop = newVal;
            this.sRenderer.toggleClass(this.classes.gutterTop, newVal);
        }
    }
    get gutterTop() {
        return this._gutterTop;
    }
    set gutterBottom(val) {
        const newVal = coerceBooleanProperty(val);
        if (newVal !== this.gutterBottom) {
            this._gutterBottom = newVal;
            this.sRenderer.toggleClass(this.classes.gutterBottom, newVal);
        }
    }
    get gutterBottom() {
        return this._gutterBottom;
    }
    constructor(_theme, _el, renderer, sRenderer) {
        super(_theme);
        this._el = _el;
        this.renderer = renderer;
        this.sRenderer = sRenderer;
        /** @docs-private */
        this.classes = this._theme.renderStyleSheet(STYLES);
        this.renderer.addClass(this._el.nativeElement, this.classes.root);
    }
    ngOnInit() {
        if ((this.gutterTop && this.gutterBottom)) {
            throw new Error(`use '<element lyTyp gutter>' instead of '<element lyTyp gutterTop gutterBottom>'`);
        }
    }
    ngOnChanges() {
        this.updateStyle(this._el.nativeElement);
    }
    _createTypClass(val, instance) {
        const newKey = `k-typ:${val}`;
        return this.sRenderer.add(newKey, (theme) => {
            if (theme.typography && theme.typography.lyTyp) {
                const lyTyp = theme.typography.lyTyp[val];
                if (lyTyp) {
                    return lyTyp instanceof StyleCollection
                        ? lyTyp.setTransformer((_) => _()).css
                        : lyTyp();
                }
            }
            throw new Error(`Value typography.lyTyp['${val}'] not found in ThemeVariables`);
        }, STYLE_PRIORITY, instance);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyTypography, deps: [{ token: i1.LyTheme2 }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.StyleRenderer }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyTypography, isStandalone: false, selector: "[lyTyp]", inputs: { color: "color", lyTyp: "lyTyp", noWrap: "noWrap", gutter: "gutter", gutterTop: "gutterTop", gutterBottom: "gutterBottom" }, providers: [
            StyleRenderer
        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyTypography, decorators: [{
            type: Directive,
            args: [{
                    selector: `[lyTyp]`,
                    inputs: [
                        'color'
                    ],
                    providers: [
                        StyleRenderer
                    ],
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i1.LyTheme2 }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.StyleRenderer }], propDecorators: { lyTyp: [{
                type: Input
            }], noWrap: [{
                type: Input
            }], gutter: [{
                type: Input
            }], gutterTop: [{
                type: Input
            }], gutterBottom: [{
                type: Input
            }] } });

class LyTypographyModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyTypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyTypographyModule, declarations: [LyTypography], exports: [LyTypography, LyCommonModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyTypographyModule, imports: [LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyTypographyModule, decorators: [{
            type: NgModule,
            args: [{
                    exports: [LyTypography, LyCommonModule],
                    declarations: [LyTypography]
                }]
        }] });

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

export { LyTypography, LyTypographyBase, LyTypographyMixinBase, LyTypographyModule, STYLES };
//# sourceMappingURL=alyle-ui-typography.mjs.map