@fireng/layout/lib/primary-directive/fireng-style.directive.d.ts

Angular directives for responsive layout and visual adjustments using Fireng breakpoints.

import { FirengStyle } from '../fireng.types';
import * as i0 from "@angular/core";
export declare class FirengStyleDirective {
    /**
     * Applies dynamic and responsive custom CSS styles directly to the host element,
     * providing fine-grained control over any valid CSS property.
     *
     * This input accepts a plain JavaScript object (a map) where:
     * - Keys are standard CSS property names in **camelCase** (e.g., `backgroundColor`, `fontSize`, `padding`, `borderLeft`).
     *
     * Values for these properties can be:
     * - A static CSS value string (e.g., `'red'`, `'10px'`, `'flex'`, `'inherit'`).
     * - A `FirengResponsiveMap<string>` object for breakpoint-specific styling (e.g., `{ xs: '16px', sm: '24px' }`).
     *
     * This allows for highly flexible styling, supporting any CSS property that can be set via
     * an element's `style` attribute, including global CSS values for individual properties.
     *
     * @example
     * // Applying various custom styles, including a responsive font size:
     * <span
     * [fireStyle]="{
     * color: 'white',
     * backgroundColor: '#007bff',
     * fontSize: { xs: '16px', sm: '24px' }, // Responsive value for fontSize
     * padding: '10px 20px',
     * borderRadius: '5px'
     * }"
     * >
     * Responsive Text
     * </span>
     * @defaultValue `{}`
     */
    style: import("@angular/core").InputSignal<FirengStyle>;
    private readonly screenService;
    private readonly activeStyle;
    static ɵfac: i0.ɵɵFactoryDeclaration<FirengStyleDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FirengStyleDirective, "[fireStyle]", never, { "style": { "alias": "fireStyle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}