@omnia/fx-models/Layout.d.ts

Provide Omnia Fx Models Stuffs.

import { MultilingualString, ThemeDefinition, IIcon, SpacingSettings, IconPickerModel, WebComponentDefinition, OmniaBlock, GuidValue, RadialGradientShapes, HorizontalAlignments, BlockTitleSettings, LayoutItemActions, LayoutEditorModes, BlockRenderingModes, TabbedDisplayModes, TabbedIconPositions, LayoutDrawerTabs, ILayoutCanvasDefinitionBuilder, MediaPickerImage, IMessageBusTopicSubscription, MediaPickerStorageProviderContext, OmniaBackendRuntimes, OmniaClientRuntimes, LayoutCanvasModes } from ".";
import { MessageBusTopicMediator } from "../";
import { TargetingFilterProperty } from "../sp";
import { ShapeDividerSettings } from "./ShapeDividerSettingsModel";
import { ClipboardLayoutItem } from "./Clipboard";
import { FilePickerStorageProviderContext } from "./FilePicker";
export interface Layout {
    definition: LayoutDefinition;
    blockSettings: BlockSettings;
    ownerLayoutItemsOverride: LayoutItem[];
}
export interface LoadedLayout {
    definition: LayoutDefinition;
    ownerLayoutItemsOverride: LayoutItem[];
    blockSettings: IReactiveLayoutItemsSettingsStore;
}
export interface IReactiveLayoutItemsSettingsStore {
    updateSetting(value: ReactiveLayoutItemSettings): any;
    getSetting(key: string): ReactiveLayoutItemSettings;
    copySetting(existingKey: string, newKey: string): ReactiveLayoutItemSettings;
    hasSetting(key: string): boolean;
    updateSettingsElement(id: string, element: string): any;
    resetSetting(key: string): any;
    getSettings(): BlockSettings;
    deleteSetting(key: string): any;
    onSettingsElementUpdated: MessageBusTopicMediator<ReactiveLayoutItemSettings>;
    onSettingUpdated: MessageBusTopicMediator<ReactiveLayoutItemSettings>;
}
export interface LayoutDefinition extends LayoutItem {
    settings?: LayoutSettings;
    inheritedSettings: LayoutSettings;
}
export interface BlockSettings {
    [id: string]: unknown;
}
export interface BlockSettingsWithDefaultProperty<T> extends BlockSettings {
    defaultProperty: T;
}
export interface LayoutSettings extends LayoutItemSettings {
    background?: BackgroundSettings;
    tenantHeaderColor?: string;
    appHeaderColor?: string;
    chrome?: string;
    chromeFlat: boolean;
    spacingColumn?: number;
    spacingBlock?: number;
    minWidthBlock?: string;
    useCustomBlockTheme: boolean;
    useCustomLayoutTheme: boolean;
    themeDefinitionBlock?: ThemeDefinition;
    themeDefinitionLayout?: ThemeDefinition;
    blockTitleSettings: BlockTitleSettings;
    useCustomBlockTitle: boolean;
    middleAlignVertical: boolean;
}
export interface LayoutItem {
    id: string;
    ownerLayoutId: string;
    itemtype: string;
    items?: Array<LayoutItem>;
    settings?: LayoutItemSettings;
}
export interface LayoutItemSettings {
    deviceBreakPoints: Array<DisplayBreakPointSetting>;
    background?: BackgroundSettings;
    hidden?: boolean;
    css: string;
    customCssClasses: string;
}
export interface LinearGradientBackground extends BackgroundSettings {
    degrees: number;
}
export interface RadialGradientBackground extends BackgroundSettings {
    shape: RadialGradientShapes;
    position?: number;
}
export interface ImageBackground {
    mediaPickerImage: MediaPickerImage;
    blurFilter: BlurBackgroundFilter;
    size: string;
    repeat: string;
    opacity: number;
    position: string;
    attachment: string;
}
export interface BlurBackgroundFilter {
    value: number;
}
export interface BackgroundSettings {
    colors: Array<string>;
    elevation: number;
    acrylic: boolean;
    borderRadiusTop: number;
    borderRadiusBottom: number;
    overflow: number;
    isInherited: boolean;
    borderColor: string;
    borderWidth: number;
    shapeDivider?: ShapeDividerSettings;
    image?: ImageBackground;
    cropRatioIds?: Array<GuidValue>;
    preConfiguredImageScalingUniqueId?: GuidValue;
    forceScaling: boolean;
}
export interface DisplayBreakPointSetting {
    deviceBreakPoint: string;
    propertyName: string;
    value: any;
}
export declare enum SectionTypes {
    Column = 1,
    Tab = 2,
    Accordion = 3,
    Stepper = 4
}
export interface Section<T extends SectionSettings = SectionSettings> extends LayoutItem {
    settings: T;
}
export interface SectionSettings extends LayoutItemSettings {
    type: SectionTypes;
    alignment: HorizontalAlignments;
    width: string;
    minHeight: string;
    spacingBlock: number;
    spacingColumn: number;
    minWidthBlock: string;
    marginSectionLeft: number;
    marginSectionRight: number;
    marginSectionTop: number;
    marginSectionBottom: number;
    targetingFilterProperties: TargetingFilterProperty;
    titleSettings: BlockTitleSettings;
    sectionTitle: string | MultilingualString;
    useFullSpace: boolean;
    icon: IIcon;
    useCustomTheme: boolean;
    themeDefinition: ThemeDefinition;
    hidden?: boolean;
    disableLazyLoad?: boolean;
    headerLevel?: GuidValue;
}
export interface ColumnedSectionSettings extends SectionSettings {
    type: SectionTypes.Column;
}
export interface TabbedSectionSettings extends SectionSettings {
    type: SectionTypes.Tab;
    tabAlignment: HorizontalAlignments;
    showSlider: boolean;
    bgColor: string;
    tabColor: string;
    activeTabColor: string;
    labelColor: string;
    activeLabelColor: string;
    displayMode: TabbedDisplayModes;
    grow: boolean;
    sliderColor: string;
    customSize: boolean;
    tabMinHeight: number;
    tabMinWidth: number;
    textColor: string;
    activeTextColor: string;
    iconColor: string;
    iconPosition: TabbedIconPositions;
    activeIconColor: string;
    borderRadiusAll: boolean;
    borderRadius: number;
}
export interface AccordionedSectionSettings extends SectionSettings {
    type: SectionTypes.Accordion;
    labelPadding: SpacingSettings;
    tabColor: string;
    activeTabColor: string;
    labelColor: string;
    activeLabelColor: string;
    textColor: string;
    activeTextColor: string;
    iconColor: string;
    activeIconColor: string;
    borderRadiusAll: boolean;
    borderRadius: number;
    collapsed: boolean;
    flatHeader: boolean;
    singleSelect: boolean;
}
export interface StepperSectionSettings extends SectionSettings {
    type: SectionTypes.Stepper;
    vertical: boolean;
    nonLinear: boolean;
    labelSettings: StepperLabelSettings;
    scrollToTopOnSelectedStep: boolean;
    paging?: boolean;
}
export interface StepperLabelSettings {
    none: boolean;
    altLabels: boolean;
}
export interface SectionItem<T extends SectionItemSettings = SectionItemSettings> extends LayoutItem {
    settings: T;
}
export interface SectionItemSettings extends LayoutItemSettings {
    type: SectionTypes;
}
export interface ColumnedSectionItemSettings extends SectionItemSettings {
    type: SectionTypes.Column;
    size: string;
    minWidth: number;
    chrome: string;
}
export interface TabbedSectionItemSettings extends SectionItemSettings {
    type: SectionTypes.Tab;
    label: MultilingualString;
    tooltip: MultilingualString;
    icon: IconPickerModel;
    customAnchorNameEnabled: boolean;
    anchorName?: string;
    scrollIntoViewDisabled: boolean;
}
export interface AccordionedSectionItemSettings extends SectionItemSettings {
    type: SectionTypes.Accordion;
    label: MultilingualString;
    tooltip: MultilingualString;
    icon: IconPickerModel;
    customAnchorNameEnabled: boolean;
    anchorName?: string;
    scrollIntoViewDisabled: boolean;
}
export interface SteppedSectionItemSettings extends SectionItemSettings {
    type: SectionTypes.Stepper;
    label: MultilingualString;
    customAnchorNameEnabled: boolean;
    anchorName?: string;
}
export interface Block extends LayoutItem {
    manifestId: GuidValue;
    elementName?: string;
    settings: BlockLayoutSettings;
}
export interface HeaderItemSettings {
    icon: IIcon;
    titleSettings: BlockTitleSettings;
    anchorName?: string;
    scrollIntoViewDisabled: boolean;
    headerLevel?: GuidValue;
}
export interface SpacingItemSettings {
    paddingRight: number;
    paddingLeft: number;
    paddingTop: number;
    paddingBottom: number;
    minHeight: string;
}
export interface StyleItemSettings {
    chrome: string;
    background?: BackgroundSettings;
}
export interface TargetingItemSettings {
    targetingFilterProperties: TargetingFilterProperty;
}
export interface ThemingItemSettings {
    useCustomTheme: boolean;
    themeDefinition: ThemeDefinition;
}
export interface CssItemSettings {
    css: string;
    customCssClasses: string;
}
export interface SearchValue {
    text: MultilingualString;
}
export interface BlockLockSettings {
    lockedByDefault: boolean;
    lockCanBeEdited: boolean;
}
export interface BlockLayoutSettings extends LayoutItemSettings, HeaderItemSettings, SpacingItemSettings, StyleItemSettings, TargetingItemSettings, ThemingItemSettings, CssItemSettings {
    hidden: boolean;
    search?: SearchValue;
    lockSettings?: BlockLockSettings;
    unlocked?: boolean;
}
export interface DisplayBreakPoint {
    id: string;
    icon: string;
    label: string;
    rangedescription: string;
    minWidth: number;
    maxWidth: number;
    previewWidth: string;
    enableDisplayBreakPointSettings: boolean;
}
export interface SettingsPanelState {
    show: boolean;
    visible: boolean;
}
export interface LayoutDrawerState {
    activeTab: LayoutDrawerTabs;
}
export interface LayoutItemActionState {
    action: LayoutItemActions;
}
export interface AddItemToLayoutPayLoad {
    item: LayoutItem;
    containerId: string;
    siblingId: string;
    postInsert: boolean;
}
export interface DeleteItemFromLayoutPayLoad {
    item: LayoutItem;
    containerId: string;
}
export interface OmniaBlockComponentDefinition extends WebComponentDefinition, OmniaBlock {
    showInOmniaBlock: boolean;
    category?: string;
    editorsettings?: EditorConfigSettings;
}
export interface EditorConfigSettings {
    editorOverlay?: boolean;
    topContainer?: boolean;
}
export interface LayoutSectionRendererSlots {
    afterColumnMarkup: (section: Section) => JSX.Element;
}
export interface ILayoutSectionRenderer {
    ensureBackgroundImageHandler?: (section: Section) => void;
    slots: LayoutSectionRendererSlots;
}
export interface LayoutItemRegistration {
    icon: string;
    category: string;
    title: string;
    description: string;
    topContainer: boolean;
}
export interface ImportLayoutResult {
    isValid: boolean;
    errorMessage: string;
    layout: Layout;
}
export interface LayoutTemplateRegistration {
    encodedImage: string;
    category: string;
    title: string;
    layout: Layout;
    validator?: any;
    weight: number;
    onTemplateSelected?: (currentlayout: Layout, templateLayout: Layout) => Layout;
}
export interface ILayoutTemplateValidator {
    isValid: () => boolean;
}
export interface BlockRegistration extends LayoutItemRegistration {
    manifestId: GuidValue;
    elementName?: string;
    featureDependencyIds?: Array<GuidValue>;
    layoutDependencyProviders: string[];
    requiredBackendRuntimes?: Array<OmniaBackendRuntimes>;
    requiredClientRuntimes?: Array<OmniaClientRuntimes>;
    authDisabled?: boolean;
}
export interface ILayoutDependencyProvider {
}
export interface CustomRegistration extends LayoutItemRegistration {
    id?: GuidValue;
    sectionHandler: (layout: LoadedLayout) => Array<Section>;
    iconComponent?: string;
}
export interface ReactiveLayoutItemSettings {
    id: string;
    isExisting: boolean;
    value: any;
    element?: string;
    defaultSettings?: any;
    serializationOptions?: JsonSerializationOptions;
}
export interface JsonSerializationOptions {
    nullValueHandling: JsonNullValueHandling;
    disableTreatingEmptyStringAsNull: boolean;
    disableTreatingFalseAsNull: boolean;
    disableTreatingZeroAsNull: boolean;
    disableTreatingEmptyArrayAsNull: boolean;
}
export declare enum JsonNullValueHandling {
    include = 0,
    ignore = 1
}
export interface BlockSettingsReaderOptions<T> {
    editElementManifestId?: GuidValue;
    defaultValue?: T;
    missingPropertyHandler?: (missingPropertyName: string, parent: object, defaultValue: object) => object;
    serializationOptions?: JsonSerializationOptions;
}
export type IBlockSettingsWriter<T> = T & IBlockSettingsWriterExtender;
export interface BlockSettingsWriterOptions<T> {
    missingPropertyHandler?: (missingPropertyName: string, parent: object, defaultValue: object) => object;
    disableAutoSync?: boolean;
    defaultValue?: T;
}
export interface IBlockSettingsWriterExtender {
    save(): any;
    reset(): any;
}
export interface IBlockApi<TSettings = void> {
    fillData: (instance: IBlockInstance<TSettings>) => void;
}
export interface IBlockInstance<TSettings = void> {
    id: string;
    manifestId: GuidValue;
    layoutDefinitionId: GuidValue;
    mode: BlockRenderingModes;
    hide: boolean;
    layoutSettings: BlockLayoutSettings;
    provider: string;
    breakpoint: Breakpoint;
    clickProtection: {
        disabled: boolean;
    };
    onSettingsChanged: IMessageBusTopicSubscription<TSettings>;
    renderCacheKeyProvider?: (currentKey: string, settings: TSettings) => string;
    mediaContext: ILayoutMediaContext;
    fileContext: ILayoutFileContext;
    setSearchValue: (value: MultilingualString) => void;
}
export interface LayoutInheritanceBehaviors {
    section: SectionLayoutInheritanceBehaviors;
    lock?: BlockLayoutLockBehaviors;
}
export interface BlockLayoutLockBehaviors {
    enable: boolean;
    parentLayout?: Layout;
}
export interface SectionLayoutInheritanceBehaviors {
    editableInDesignPreview: boolean;
}
export interface LayoutEditorCanvasStore extends ILayoutCanvasStore {
    getters: {
        getLayout: () => Layout;
        getDefinitionBuilder: () => ILayoutCanvasDefinitionBuilder;
        getSelectedLayoutItem: () => LayoutItem;
    };
    mutations: {
        disableAnchorLink: () => void;
        disableAuth: () => void;
        setCanvasMode: (mode: LayoutCanvasModes) => void;
        setLayout: (layout: Layout) => void;
        createNewLayout: () => void;
        setTheme: (layoutThemeDefinition: ThemeDefinition, blockThemeDefinition: ThemeDefinition) => void;
        setLayoutBackgroundImageElementId: (elementId: string) => void;
        setPreviewUrl: (url: string) => void;
        setEditorMode: (mode: LayoutEditorModes) => void;
        setActiveTab: (tab: LayoutDrawerTabs) => void;
        setSuggestedBlocks: (blocks: string[]) => void;
        toggleSettingsPanel: (show: boolean) => void;
        removeSelectedLayoutItem: () => void;
        configureLayoutBehaviors: (layoutBehaviors: LayoutInheritanceBehaviors) => void;
        enableDisplayBreakpointSettings: (enable: boolean) => void;
    };
    events: {
        onBlockInstanceCreated: (cb: (blockInstance: IBlockInstance) => void) => void;
        onBlockCopied: (cb: (originalBlock: Block, newBlock: Block) => void) => void;
        onBlockRemoved: (cb: (block: Block) => void) => void;
        onLayoutItemMoved: (cb: (layoutItem: LayoutItem) => void) => void;
        onLayoutItemPasted: (cb: (layoutItem: ClipboardLayoutItem) => void) => void;
        onLayoutSectionRendererCreated: (cb: (layoutSectionRenderer: ILayoutSectionRenderer) => void) => void;
    };
}
export interface LayoutRendererCanvasStore extends ILayoutCanvasStore {
}
export interface ILayoutCanvasStore {
    mutations: {
        setLayout: (layout: Layout) => void;
        setTheme: (layoutThemeDefinition: ThemeDefinition, blockThemeDefinition: ThemeDefinition) => void;
        setLayoutBackgroundImageElementId: (elementId: string) => void;
        setCanvasMode: (mode: LayoutCanvasModes) => void;
        setEditorMode: (mode: LayoutEditorModes) => void;
        disableAnchorLink: () => void;
    };
    events: {
        onBlockInstanceCreated: (cb: (blockInstance: IBlockInstance) => void) => void;
        onBlockCopied: (cb: (originalBlock: Block, newBlock: Block) => void) => void;
        onBlockRemoved: (cb: (block: Block) => void) => void;
        onLayoutItemMoved: (cb: (layoutItem: LayoutItem) => void) => void;
        onLayoutItemPasted: (cb: (layoutItem: ClipboardLayoutItem) => void) => void;
        onLayoutSectionRendererCreated: (cb: (layoutSectionRenderer: ILayoutSectionRenderer) => void) => void;
    };
}
export interface LayoutEditorCanvasApi {
    layoutStore: LayoutEditorCanvasStore;
    mediaContext: ILayoutMediaContext;
    fileContext: ILayoutFileContext;
}
export interface LayoutRendererCanvasApi {
    layoutStore: LayoutRendererCanvasStore;
    mediaContext: ILayoutMediaContext;
    fileContext: ILayoutFileContext;
}
export interface Breakpoint {
    xs: boolean;
    xsOnly: boolean;
    sm: boolean;
    smOnly: boolean;
    smAndDown: boolean;
    smAndUp: boolean;
    md: boolean;
    mdOnly: boolean;
    mdAndDown: boolean;
    mdAndUp: boolean;
    lg: boolean;
    lgOnly: boolean;
    lgAndDown: boolean;
    lgAndUp: boolean;
    xl: boolean;
    xlOnly: boolean;
    name: ("xs" | "sm" | "md" | "lg" | "xl");
    width: number;
    height: number;
    thresholds: {
        xs: number;
        sm: number;
        md: number;
        lg: number;
    };
    scrollbarWidth: number;
}
/**
 * Define different context extending this so that Layout can different multiple media provider per context
 * */
export declare abstract class LayoutContextType {
}
export interface ILayoutMediaContext {
    /**
     * The default media-provider-context is for common scenario work with images in layout.
     * e.g. When layout in edit mode
     * */
    default: MediaPickerStorageProviderContext;
    /**
     * For other advanced scenarios, layout can provide different media-provider-context in a layout.
     * e.g. When layout in read mode but allow reader to be able to work with images (add comment,...)
     * */
    getContextByType: (type: new () => LayoutContextType) => MediaPickerStorageProviderContext;
}
export interface ILayoutFileContext {
    default: FilePickerStorageProviderContext;
    getContextByType: (type: new () => LayoutContextType) => FilePickerStorageProviderContext;
}