@alyle/ui/src/style-utils.d.ts

Minimal Design, a set of components for Angular

import { Color } from '@alyle/ui/color';
import { Styles, LyClasses } from './theme/style';
import { StyleTemplate } from './parse';
export declare class LyStyleUtils {
    name: string;
    typography: {
        fontFamily?: string;
        htmlFontSize: number;
        fontSize: number;
    };
    breakpoints: {
        XSmall: string;
        Small: string;
        Medium: string;
        Large: string;
        XLarge: string;
        Handset: string;
        Tablet: string;
        Web: string;
        HandsetPortrait: string;
        TabletPortrait: string;
        WebPortrait: string;
        HandsetLandscape: string;
        TabletLandscape: string;
        WebLandscape: string;
        [key: string]: string;
    };
    direction: Dir | `${Dir}`;
    /** Returns left or right according to the direction */
    get before(): "right" | "left" | "top" | "bottom";
    /** Returns left or right according to the direction */
    get after(): "right" | "left" | "top" | "bottom";
    /** Returns top */
    readonly above = "top";
    /** Returns bottom */
    readonly below = "bottom";
    pxToRem(value: number): string;
    colorOf(value: string | number, optional?: string): Color;
    getBreakpoint(key: string): string;
    selectorsOf<T>(styles: T & Styles): LyClasses<T>;
    getDirection(val: DirAlias | 'before' | 'after' | 'above' | 'below'): "right" | "left" | "top" | "bottom";
    isRTL(): boolean;
}
export declare enum Dir {
    rtl = "rtl",
    ltr = "ltr"
}
export declare enum DirAlias {
    before = "before",
    after = "after"
}
export declare enum DirPosition {
    left = "left",
    right = "right"
}
export type MediaQueryArray = (string | number)[];
export type MediaQueryArrayDeprecated = ((number | string | [(string | number), string]))[];
/**
 * Extract breakpoints from a string to make it a unique `StyleTemplate`
 * @param str Media Queries in inline style
 * @param transformer A function with parameters to create a `StyleTemplate`
 * @deprecated
 */
export declare function withMediaInline(str: string | number | MediaQueryArray, transformer: ((val: string | number, media: string | null) => StyleTemplate)): (className: string) => string;
/**
 * Extract media query from a string
 */
export declare const parseMediaQueryFromString: (key: string) => [string | number, string][];
/**
 * Extract media queries from a string
 */
export declare const parseMediaQueriesFromString: (key: string) => string[];
/**
 * @depracated use `withMediaInline` instead.
 */
export declare function eachMedia(str: string | number | MediaQueryArrayDeprecated, fn: ((val: string | number, media: string | null, index: number) => void)): void;
/**
 * @depracated use `withMediaInline` instead.
 */
export declare function eachMedia(str: string | number | MediaQueryArrayDeprecated, fn: ((val: string | number, media: string | null, index: number) => StyleTemplate), styleCollection: boolean): StyleTemplate;
export declare function mergeDeep<T, U>(target: T, source: U): T & U;
export declare function mergeDeep<T, U, V>(target: T, source1: U, source2: V): T & U & V;
export declare function mergeDeep<T, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
export declare function mergeDeep(target: object, ...sources: any[]): any;
export declare function mergeThemes<T, U>(target: T, source: U): T & U;
export declare function mergeThemes<T, U, V>(target: T, source1: U, source2: V): T & U & V;
export declare function mergeThemes<T, U, V, W>(target: T, source1: U, source2: V, source3: W): T & U & V & W;
export declare function mergeThemes(target: object, ...sources: any[]): any;