ngx-foldable/core/split-layout.directive.d.ts

Angular library to help you build dual-screen experiences for foldable or dual-screen devices

import { ElementRef, OnDestroy } from '@angular/core';
import { SafeStyle } from '@angular/platform-browser';
import { ScreenContext } from './screen-context';
import * as i0 from "@angular/core";
/**
 * Defines how the split layout container should be rendered when multi screen
 * is detected.
 * See {@link SplitLayoutDirective}
 */
export declare type SplitLayoutMode = 'flex' | 'grid' | 'absolute';
/**
 * Enumeration of split layout modes values for use with
 * {@link SplitLayoutDirective}.
 */
export declare const SplitLayoutMode: {
    Flex: SplitLayoutMode;
    Grid: SplitLayoutMode;
    Absolute: SplitLayoutMode;
    /**
     * Checks if the given string value is a valid {@link SplitLayoutMode}.
     *
     * @param value The value to check.
     * @return true if the value is a valid {@link SplitLayoutMode}.
     */
    isValid: (value: string) => boolean;
};
/**
 * Defines how the split layout container should order the window segments
 * when in horizontal spanning mode vs vertical spanning mode.
 * See {@link SplitLayoutDirective}
 */
export declare type WindowOrder = 'normal' | 'reverse';
/**
 * Enumeration of window order values for use with
 * {@link SplitLayoutDirective}.
 */
export declare const WindowOrder: {
    Normal: WindowOrder;
    Reverse: WindowOrder;
    /**
     * Checks if the given string value is a valid {@link WindowOrder}.
     *
     * @param value The value to check.
     * @return true if the value is a valid {@link WindowOrder}.
     */
    isValid: (value: string) => boolean;
};
/**
 * Defines the text reading direction for the host element.
 */
export declare type ReadingDirection = 'ltr' | 'rtl';
/**
 * Enumeration of the text reading direction values.
 */
export declare const ReadingDirection: {
    LeftToRight: ReadingDirection;
    RightToLeft: ReadingDirection;
};
/**
 * Defines a parent layout container for creating a split layout on multi
 * screen devices.
 *
 * When used on a single screen device, no layout change (CSS) is added.
 * You can choose between different {@link SplitLayoutMode} to suit your
 * design.
 *
 * This directive should be used along with {@link WindowDirective}.
 *
 * @example
 * <div fdSplitLayout="grid">
 *              <section fdWindow="0">Will be displayed on first screen</section>
 *              <section fdWindow="1">Will be displayed on second screen (if available)</section>
 * </div>
 *
 * In addition, you can also choose keep the same window segments order or
 * reverse it when the spanning mode change from vertical to horizontal using
 * a second optional parameter on the directive:
 *
 * @example
 * <div fdSplitLayout="flex reverse">
 *              <section fdWindow="0">
 *                Will be displayed on first screen in vertical spanning mode
 *                and on the second screen in horizontal spanning mode.
 *              </section>
 *              <section fdWindow="1">
 *                Will be displayed on second screen in vertical spanning mode
 *                and on the first screen in horizontal spanning mode.
 *              </section>
 * </div>
 */
export declare class SplitLayoutDirective implements OnDestroy {
    private element;
    private screenContext;
    private mode;
    private order;
    private layoutStyle;
    private screenContextSubscription;
    private direction;
    /**
     * Sets the current split layout options to use when multi screen is
     * detected.
     *
     * @param options The split layout options to use.
     * Format: `[mode] [order]`
     * - The {@link SplitLayoutMode} to use (default is {@link SplitLayoutMode.Flex}).
     * - The {@link WindowOrder} to use (default is {@link WindowOrder.Normal}).
     */
    set fdSplitLayout(options: string | undefined);
    /** @ignore */
    get style(): SafeStyle;
    constructor(element: ElementRef, screenContext: ScreenContext);
    /**
     * The current split layout mode to use when multi screen is detected.
     *
     * @return The current split layout mode.
     */
    get layoutMode(): SplitLayoutMode;
    /**
     * The window segments order to use when in horizontal spanning mode.
     *
     * @return The current window order.
     */
    get windowOrder(): WindowOrder;
    /**
     * The text reading direction for the host element.
     *
     * @return The text reading direction.
     */
    get readingDirection(): ReadingDirection;
    /** @ignore */
    ngOnDestroy(): void;
    private parseOptions;
    private updateStyle;
    static ɵfac: i0.ɵɵFactoryDeclaration<SplitLayoutDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<SplitLayoutDirective, "[fdSplitLayout]", never, { "fdSplitLayout": "fdSplitLayout"; }, {}, never, never, false, never>;
}