import { BaseElement } from '../shared/base';
/**
 * Variants of the `card` element type. Each maps to a Vue file under
 * `src/components/compositions/elements/card/` via the engine registry.
 *
 * `card.*` elements bridge the element/card divide: they act as layout
 * containers that live inline inside any element list. In the FormBuilder,
 * `card.list` is the primary nested canvas — its `elementList` IDs
 * reference entries in the flat schema, enabling drag-and-drop in/out of
 * the container. The other styles wrap their corresponding DisplayCard
 * compositions as element-compatible renderers.
 */
export type CardStyle = "list" | "datatable" | "grid" | "info" | "tab";
export interface CardLayoutElement extends BaseElement<`card.${CardStyle}`> {
    title?: string;
    subtitle?: string;
    showCard?: boolean;
    /**
     * Builder-managed child element IDs. Resolved to `nestedElements` by
     * the FormBuilder canvas before being passed to the composition as props.
     */
    elementList?: string[];
    /**
     * Resolved child elements passed by the FormBuilder / engine at render
     * time. Compositions receive this, NOT `elementList`.
     */
    nestedElements?: Array<Record<string, unknown>>;
    /** Vertical gap between nested elements. */
    gutterY?: string;
    /** Horizontal gap between nested elements. */
    gutterX?: string;
    /**
     * For `card.tab` (a tab list): one entry per tab. Each tab is conceptually
     * a "tab container" — a card-list with `style: 'tab-container'` in v1 —
     * and owns its own `elementList` plus tab-container chrome (icon, image,
     * gutters, etc.).
     */
    tabs?: Array<{
        id: string;
        label: string;
        elementList?: string[];
        /** Icon shown alongside the tab label in the nav. */
        icon?: string;
        /** Image shown alongside the tab label in the nav. */
        imageAsset?: string | {
            id: string;
            url: string;
        };
        /** Show the surrounding card chrome inside this tab. */
        showCard?: boolean;
        /** Allow drag/drop reordering of elements within this tab. */
        draggable?: boolean;
        /** Identifier delivered to drop handlers when elements are dragged out. */
        dragTargetData?: string;
        /** Vertical gap between this tab's elements. */
        gutterY?: string;
        /** Horizontal gap between this tab's elements. */
        gutterX?: string;
    }>;
    /** Active tab index shown on mount (default 0). */
    activeTab?: number;
    /**
     * `card.tab` nav configuration — mirrors `TabListCard`. These round-trip to
     * the v1 `tabs_list` node so a tab container behaves like a TabListCard.
     */
    /** Render the tab nav horizontally along the top. */
    horizontalNav?: boolean;
    /** Force the nav bar above the panel content. */
    navOnTop?: boolean;
    /** Hide the nav bar entirely. */
    hideNav?: boolean;
    /** API endpoint for fetching table rows. */
    dataRoute?: string;
    /**
     * Column definitions. Named `tableColumns` to avoid shadowing the
     * responsive-grid `columns` field from `ResponsiveColumns`.
     */
    tableColumns?: Array<{
        key: string;
        label: string;
        sortable?: boolean;
    }>;
    /** Number of CSS-grid columns (default 3). */
    gridCols?: number;
    /** Row height in pixels used by the grid layout (default 60). */
    gridRowHeight?: number;
    /** Icon shown in the card header. */
    icon?: string;
    /** Tailwind / CSS colour class for the header icon. */
    iconColor?: string;
    /** URL or asset path for a card header image. */
    headerImage?: string;
    /** Aspect ratio string for the header image (e.g. `"16/9"`). */
    headerRatio?: string;
    /** Reduce internal padding. */
    lessPadding?: boolean;
    /** Key/value pairs rendered as read-only rows in the card body. */
    fields?: Array<{
        label: string;
        value: string;
        icon?: string;
        format?: string;
        prepend?: string;
        append?: string;
    }>;
}
export declare const CardLayoutElementDefaults: {
    readonly type: "card.list";
    readonly showCard: true;
    readonly gutterY: "1rem";
    readonly gutterX: "0";
    readonly gridCols: 3;
    readonly gridRowHeight: 60;
    readonly columns: 12;
    readonly columnsSm: 12;
    readonly columnsMd: 12;
    readonly columnsLg: 12;
    readonly columnsXl: 12;
};
export declare const CardLayoutElementMetadata: {
    readonly icon: "layout-panel-left";
    readonly displayLabel: "Card / Layout Block";
    readonly elementCategory: "card";
    readonly description: "A layout container. Use 'list' to group elements in a card, 'tab' to create a tab list (each tab is its own container), 'info' for display tiles, or 'datatable'/'grid' for structured data.";
};
export declare const CardLayoutElementEditConfig: {
    readonly style: {
        readonly type: "option-select.select";
        readonly defaultValue: "list";
        readonly label: "Card Style";
        readonly selectOptions: readonly [{
            readonly label: "List";
            readonly value: "list";
        }, {
            readonly label: "Tab List";
            readonly value: "tab";
        }, {
            readonly label: "Info Card";
            readonly value: "info";
        }, {
            readonly label: "Data Table";
            readonly value: "datatable";
        }, {
            readonly label: "Grid Layout";
            readonly value: "grid";
        }];
        readonly columns: 12;
        readonly section: "layout";
    };
    readonly title: {
        readonly type: "input.text";
        readonly label: "Title";
        readonly columns: 12;
        readonly section: "configuration";
    };
    readonly subtitle: {
        readonly type: "input.text";
        readonly label: "Subtitle";
        readonly columns: 12;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "in-array";
            readonly value: readonly ["list", "info"];
        }];
    };
    readonly showCard: {
        readonly type: "boolean.switch";
        readonly defaultValue: true;
        readonly label: "Show Card Chrome";
        readonly columns: 12;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "in-array";
            readonly value: readonly ["list", "tab", "info"];
        }];
    };
    readonly horizontalNav: {
        readonly type: "boolean.switch";
        readonly label: "Horizontal Tabs";
        readonly columns: 12;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "tab";
        }];
    };
    readonly navOnTop: {
        readonly type: "boolean.switch";
        readonly label: "Use Top Navigation";
        readonly columns: 12;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "tab";
        }];
    };
    readonly hideNav: {
        readonly type: "boolean.switch";
        readonly label: "Hide Navigation Bar";
        readonly columns: 12;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "tab";
        }];
    };
    readonly gutterY: {
        readonly type: "input.text";
        readonly label: "Vertical Gap";
        readonly columns: 6;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "in-array";
            readonly value: readonly ["list", "tab"];
        }];
    };
    readonly gutterX: {
        readonly type: "input.text";
        readonly label: "Horizontal Gap";
        readonly columns: 6;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "in-array";
            readonly value: readonly ["list", "tab"];
        }];
    };
    readonly gridCols: {
        readonly type: "input.number";
        readonly label: "Grid Columns";
        readonly columns: 6;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "grid";
        }];
    };
    readonly gridRowHeight: {
        readonly type: "input.number";
        readonly label: "Row Height (px)";
        readonly columns: 6;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "grid";
        }];
    };
    readonly dataRoute: {
        readonly type: "input.text";
        readonly label: "Data Route";
        readonly columns: 12;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "datatable";
        }];
    };
    readonly icon: {
        readonly type: "picker.icon";
        readonly label: "Header Icon";
        readonly columns: 6;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "info";
        }];
    };
    readonly iconColor: {
        readonly type: "input.text";
        readonly label: "Icon Color";
        readonly columns: 6;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "info";
        }];
    };
    readonly headerImage: {
        readonly type: "file.asset-picker";
        readonly label: "Header Image";
        readonly columns: 12;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "info";
        }];
    };
    readonly headerRatio: {
        readonly type: "input.text";
        readonly label: "Image Aspect Ratio";
        readonly columns: 6;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "info";
        }];
    };
    readonly lessPadding: {
        readonly type: "boolean.switch";
        readonly label: "Reduce Padding";
        readonly columns: 6;
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "info";
        }];
    };
};
export declare const CardStyleMetadataMap: Partial<Record<CardStyle, {
    displayLabel: string;
    description: string;
}>>;
//# sourceMappingURL=CardLayoutElement.d.ts.map