@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-directives-typography.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import * as i0 from '@angular/core';
import { input, inject, ElementRef, Renderer2, effect, Directive } from '@angular/core';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';

/* eslint-disable @angular-eslint/no-input-rename */
/**
 * @internal
 * CSS class generator for typography variants
 */
const typographyDirective = cva([], {
    variants: {
        variant: {
            h1: ['text-[24px]', 'text-balance', 'font-heading', 'leading-tight', 'tracking-wide'],
            h2: ['text-[20px]', 'text-balance', 'font-heading', 'leading-tight', 'tracking-wide'],
            h3: ['text-[18px]', 'text-balance', 'font-heading', 'leading-tight', 'tracking-wide'],
            h4: ['text-[16px]', 'text-balance', 'font-heading', 'leading-tight', 'tracking-wide'],
            h5: ['text-[15px]', 'text-balance', 'font-heading', 'leading-tight', 'tracking-wide'],
            h6: ['text-[14px]', 'text-balance', 'font-heading', 'leading-tight', 'tracking-wide'],
            body: ['text-[14px]', 'text-pretty', 'font-body', 'leading-normal', 'tracking-tight'],
            'body-sm': ['text-[13px]', 'text-pretty', 'font-body', 'leading-normal', 'tracking-tight'],
            'body-xs': ['text-[12px]', 'text-pretty', 'font-body', 'leading-normal', 'tracking-tight'],
            'body-xxs': ['text-[11px]', 'text-pretty', 'font-body', 'leading-normal', 'tracking-tight'],
            inherit: ['font-body'],
        },
        color: {
            base: 'text-base-content',
            'base-placeholder': 'text-neutral',
            inherit: 'text-inherit',
        },
        fontWeight: {
            bold: 'font-bold',
            semibold: 'font-semibold',
            medium: 'font-medium',
            normal: 'font-normal',
            inherit: 'font-inherit',
        },
        textOverflow: {
            clip: 'text-clip',
            ellipsis: 'text-ellipsis',
            truncate: 'text-truncate',
        },
    },
    compoundVariants: [],
    defaultVariants: {
        variant: 'body',
        color: 'inherit',
        fontWeight: 'normal',
        textOverflow: 'clip',
    },
});
/**
 * A directive for applying consistent typography styles using Tailwind CSS
 *
 * @remarks
 * Applies text styling based on variant, color, weight, and overflow properties.
 * Uses Angular's signal-based inputs for reactive style updates.
 *
 * @example
 * ```html
 * <h1 typography tyVariant="h2" tyColor="base" tyFontWeight="bold">
 *   Heading with custom typography
 * </h1>
 *
 * <p typography tyVariant="body-sm" tyTextOverflow="ellipsis">
 *   Small body text with ellipsis overflow
 * </p>
 * ```
 */
class TypographyDirective {
    /**
     * Typography variant style (heading level or body type)
     * @alias tyVariant
     * @defaultValue 'body'
     */
    variant = input('body', { alias: 'tyVariant' });
    /**
     * Text color variant
     * @alias tyColor
     * @defaultValue 'inherit'
     */
    color = input('inherit', { alias: 'tyColor' });
    /**
     * Font weight variant
     * @alias tyFontWeight
     * @defaultValue 'normal'
     */
    fontWeight = input('normal', { alias: 'tyFontWeight' });
    /**
     * Text overflow handling method
     * @alias tyTextOverflow
     * @defaultValue 'clip'
     */
    textOverflow = input('clip', { alias: 'tyTextOverflow' });
    /** @internal Reference to host element */
    element = inject(ElementRef);
    /** @internal Angular renderer instance */
    renderer = inject(Renderer2);
    /** @internal Effect to update classes when inputs change */
    classListEffect = effect(() => {
        const classList = cn(typographyDirective({
            variant: this.variant(),
            color: this.color(),
            fontWeight: this.fontWeight(),
            textOverflow: this.textOverflow(),
        }));
        this.renderer.setAttribute(this.element.nativeElement, 'class', classList);
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TypographyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.0", type: TypographyDirective, isStandalone: true, selector: "[typography]", inputs: { variant: { classPropertyName: "variant", publicName: "tyVariant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "tyColor", isSignal: true, isRequired: false, transformFunction: null }, fontWeight: { classPropertyName: "fontWeight", publicName: "tyFontWeight", isSignal: true, isRequired: false, transformFunction: null }, textOverflow: { classPropertyName: "textOverflow", publicName: "tyTextOverflow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TypographyDirective, decorators: [{
            type: Directive,
            args: [{
                    // eslint-disable-next-line @angular-eslint/directive-selector
                    selector: '[typography]',
                    standalone: true,
                }]
        }] });

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

export { TypographyDirective };
//# sourceMappingURL=sixbell-telco-sdk-directives-typography.mjs.map