@fireng/layout/lib/atomic-directives/fireng-gap-directive.d.ts

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

import { FirengResponsiveMap } from '@fireng/core';
import * as i0 from "@angular/core";
export declare class FirengGapDirective {
    /**
     * Defines the gap (gutters) between rows and columns in flex and grid layouts.
     * This is a shorthand for `row-gap` and `column-gap`.
     * Accepted values for gap are any valid CSS <length> or <percentage> value,
     * which can be a single value (for both row and column gap) or two values
     * (first for row-gap, second for column-gap).
     *
     * Global CSS values are also accepted: `inherit`, `initial`, `unset`, `revert`.
     *
     * For more details on the gap property, refer to the MDN documentation:
     * @see [MDN - gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
     *
     * Can also be provided as a responsive map for different screen sizes.
     * @example
     * // Static usage:
     * <div fireGap="20px">...</div>
     * <div fireGap="1em 0.5em">...</div>
     * <div fireGap="calc(10% + 20px)">...</div>
     * <div fireGap="unset">...</div> // Example with a global value
     * // Responsive usage:
     * <div fireGap="{ xs: '8px', sm: '1em 2em', md: '3vmin 2vmax', lg: 'inherit' }">...</div>
     * @defaultValue `normal`
     */
    gap: import("@angular/core").InputSignal<string | FirengResponsiveMap<string>>;
    private readonly screenService;
    private readonly activeGap;
    static ɵfac: i0.ɵɵFactoryDeclaration<FirengGapDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FirengGapDirective, "[fireGap]", never, { "gap": { "alias": "fireGap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}